/*
 * DCJ RAMCS design tokens.
 *
 * Layers:
 *   1. Brand sources: three colours from the Doaba College crest. Phase 3 site settings
 *      override only these (--brand, --accent, --gold) and every scale below follows.
 *   2. Primitive scales (50-900), derived with color-mix() so one colour re-themes the app.
 *   3. Semantic roles (surface, text, border, status) per theme.
 *   4. Bootstrap 5.3 variable mapping, so stock Bootstrap classes pick up the theme.
 *
 * Default palette is checked for WCAG 2.2 AA in both themes (see docs/PHASE-1-DESIGN-SYSTEM.md).
 */

@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter Variable"), local("InterVariable"),
       url("../fonts/inter/InterVariable.woff2") format("woff2");
}

/* ------------------------------------------------------------------ 1. Brand sources */
:root {
  --brand: #c8202a;   /* crest lettering crimson */
  --accent: #0b84c2;  /* crest book blue */
  --gold: #f0a30a;    /* crest flame */
}

/* ------------------------------------------------------------------ 2. Primitive scales */
:root {
  --brand-50:  color-mix(in oklab, var(--brand) 6%, #fff);
  --brand-100: color-mix(in oklab, var(--brand) 12%, #fff);
  --brand-200: color-mix(in oklab, var(--brand) 26%, #fff);
  --brand-300: color-mix(in oklab, var(--brand) 45%, #fff);
  --brand-400: color-mix(in oklab, var(--brand) 72%, #fff);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 88%, #000);
  --brand-700: color-mix(in oklab, var(--brand) 74%, #000);
  --brand-800: color-mix(in oklab, var(--brand) 60%, #000);
  --brand-900: color-mix(in oklab, var(--brand) 46%, #000);

  --accent-50:  color-mix(in oklab, var(--accent) 6%, #fff);
  --accent-100: color-mix(in oklab, var(--accent) 13%, #fff);
  --accent-200: color-mix(in oklab, var(--accent) 28%, #fff);
  --accent-300: color-mix(in oklab, var(--accent) 50%, #fff);
  --accent-400: color-mix(in oklab, var(--accent) 75%, #fff);
  --accent-500: var(--accent);
  --accent-600: color-mix(in oklab, var(--accent) 85%, #000);
  --accent-700: color-mix(in oklab, var(--accent) 70%, #000);
  --accent-800: color-mix(in oklab, var(--accent) 56%, #000);
  --accent-900: color-mix(in oklab, var(--accent) 42%, #000);

  --gold-50:  color-mix(in oklab, var(--gold) 8%, #fff);
  --gold-100: color-mix(in oklab, var(--gold) 18%, #fff);
  --gold-200: color-mix(in oklab, var(--gold) 35%, #fff);
  --gold-300: color-mix(in oklab, var(--gold) 60%, #fff);
  --gold-400: color-mix(in oklab, var(--gold) 82%, #fff);
  --gold-500: var(--gold);
  --gold-600: color-mix(in oklab, var(--gold) 80%, #000);
  --gold-700: color-mix(in oklab, var(--gold) 64%, #000);
  --gold-800: color-mix(in oklab, var(--gold) 50%, #000);
  --gold-900: color-mix(in oklab, var(--gold) 38%, #000);

  /* Neutral: cool slate, fixed (not brand-driven) */
  --gray-0:   #ffffff;
  --gray-25:  #fbfbfc;
  --gray-50:  #f6f7f9;
  --gray-100: #eef0f3;
  --gray-200: #e2e5ea;
  --gray-300: #cbd0d8;
  --gray-400: #9aa1ad;
  --gray-500: #6b7380;
  --gray-600: #4e5562;
  --gray-700: #3a404b;
  --gray-800: #262b33;
  --gray-850: #1c2027;
  --gray-900: #14171c;
  --gray-950: #0d0f13;

  /* ---------------------------------------------------------------- Type */
  --font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale, 360px → 1400px viewport */
  --fs-2xs: 0.6875rem;                                     /* 11px  labels, overlines */
  --fs-xs:  0.75rem;                                       /* 12px */
  --fs-sm:  0.8125rem;                                     /* 13px */
  --fs-base: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14 → 15px */
  --fs-md:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16 → 17px */
  --fs-lg:  clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);     /* 18 → 20px */
  --fs-xl:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 → 24px */
  --fs-2xl: clamp(1.5rem, 1.33rem + 0.8vw, 1.875rem);      /* 24 → 30px */
  --fs-3xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);       /* 28 → 36px */
  --fs-4xl: clamp(2.125rem, 1.7rem + 2vw, 3rem);           /* 34 → 48px  KPI hero */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.06em;

  /* ---------------------------------------------------------------- Space (4px grid) */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);

  /* ---------------------------------------------------------------- Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------- Layout */
  --topbar-h: 64px;
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 76px;
  --content-max: 1440px;
  --touch: 44px;

  /* ---------------------------------------------------------------- Z-index */
  --z-base: 1;
  --z-sticky: 1020;
  --z-topbar: 1030;
  --z-offcanvas: 1045;
  --z-modal: 1055;
  --z-popover: 1070;
  --z-toast: 1090;
  --z-palette: 1100;

  /* ---------------------------------------------------------------- Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

/* ------------------------------------------------------------------ 3. Semantic roles — light */
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  --surface-page: var(--gray-50);
  --surface-1: var(--gray-0);          /* cards, tables */
  --surface-2: var(--gray-25);         /* nested panels, table header */
  --surface-hover: var(--gray-100);
  --surface-sunken: var(--gray-100);   /* inputs on cards, wells */
  --surface-inverse: var(--gray-900);
  --surface-glass: rgb(255 255 255 / 0.78);
  --surface-brand: var(--brand-700);
  --surface-brand-soft: var(--brand-50);

  --border: var(--gray-200);
  --border-subtle: var(--gray-100);
  --border-strong: var(--gray-300);

  --text: var(--gray-900);
  --text-secondary: var(--gray-600);   /* 7.0:1 on page */
  --text-muted: #5f6774;               /* 5.0:1 on page, 5.6:1 on white */
  --text-disabled: var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-on-brand: #fff;

  --link: var(--brand-600);            /* 6.6:1 on white */
  --link-hover: var(--brand-700);
  --primary: var(--brand-600);
  --primary-hover: var(--brand-700);
  --primary-active: var(--brand-800);
  --primary-soft: var(--brand-50);
  --primary-soft-text: var(--brand-700);
  --focus-ring: color-mix(in oklab, var(--accent-500) 55%, transparent);

  --shadow-color: 220 30% 15%;
  --sh-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --sh-sm: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 1px 3px hsl(var(--shadow-color) / 0.08);
  --sh-md: 0 2px 4px hsl(var(--shadow-color) / 0.04), 0 6px 16px -4px hsl(var(--shadow-color) / 0.1);
  --sh-lg: 0 4px 8px hsl(var(--shadow-color) / 0.04), 0 16px 32px -8px hsl(var(--shadow-color) / 0.14);
  --sh-xl: 0 8px 16px hsl(var(--shadow-color) / 0.06), 0 32px 64px -12px hsl(var(--shadow-color) / 0.22);

  /* Feedback */
  --success-fg: #15803d; --success-bg: #ecfdf3; --success-bd: #abefc6; --success-solid: #16a34a;
  --warning-fg: #b45309; --warning-bg: #fffaeb; --warning-bd: #fedf89; --warning-solid: #f59e0b;
  --danger-fg:  #b42318; --danger-bg:  #fef3f2; --danger-bd:  #fecdca; --danger-solid:  #d92d20;
  --info-fg:    var(--accent-700); --info-bg: var(--accent-50); --info-bd: var(--accent-200); --info-solid: var(--accent-500);

  /* Workflow status — identical meaning everywhere (pills, timeline, charts) */
  --st-draft-fg:     var(--gray-600); --st-draft-bg:     var(--gray-100);  --st-draft-dot:     var(--gray-400);
  --st-submitted-fg: #0a5a85;         --st-submitted-bg: #eef8fd;          --st-submitted-dot: #0b84c2;
  --st-verified-fg:  #5b3fd6;         --st-verified-bg:  #f1eeff;          --st-verified-dot:  #7a5af8;
  --st-approved-fg:  #15803d;         --st-approved-bg:  #ecfdf3;          --st-approved-dot:  #17b26a;
  --st-returned-fg:  #c2410c;         --st-returned-bg:  #fff4ed;          --st-returned-dot:  #f97316;
  --st-rejected-fg:  #b42318;         --st-rejected-bg:  #fef3f2;          --st-rejected-dot:  #f04438;
  --st-pending-fg:   #b45309;         --st-pending-bg:   #fffaeb;          --st-pending-dot:   #f79009;

  /* Chart series (Phase 5): ordered for adjacent contrast, colour-blind aware */
  --chart-1: var(--brand-600);
  --chart-2: var(--accent-600);
  --chart-3: var(--gold-500);
  --chart-4: #12b76a;
  --chart-5: #7a5af8;
  --chart-6: #ee46bc;
  --chart-7: #0e9384;
  --chart-8: var(--gray-500);
  --chart-grid: var(--gray-200);
  --chart-label: var(--text-muted);
}

/* ------------------------------------------------------------------ 3b. Semantic roles — dark */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --surface-page: var(--gray-950);
  --surface-1: var(--gray-900);
  --surface-2: var(--gray-850);
  --surface-hover: var(--gray-800);
  --surface-sunken: var(--gray-950);
  --surface-inverse: var(--gray-50);
  --surface-glass: rgb(20 23 28 / 0.72);
  --surface-brand: var(--brand-800);
  --surface-brand-soft: color-mix(in oklab, var(--brand) 16%, var(--gray-900));

  --border: var(--gray-800);
  --border-subtle: var(--gray-850);
  --border-strong: var(--gray-700);

  --text: var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-400);       /* 6.9:1 on surface-1 */
  --text-disabled: var(--gray-600);
  --text-inverse: var(--gray-900);
  --text-on-brand: #fff;

  --link: var(--brand-300);            /* 7.4:1 on surface-1 */
  --link-hover: var(--brand-200);
  --primary: var(--brand-500);
  --primary-hover: var(--brand-400);
  --primary-active: var(--brand-600);
  --primary-soft: color-mix(in oklab, var(--brand) 18%, var(--gray-900));
  --primary-soft-text: var(--brand-200);
  --focus-ring: color-mix(in oklab, var(--accent-300) 60%, transparent);

  --shadow-color: 220 40% 2%;
  --sh-xs: 0 1px 2px hsl(var(--shadow-color) / 0.4);
  --sh-sm: 0 1px 3px hsl(var(--shadow-color) / 0.5);
  --sh-md: 0 6px 16px -4px hsl(var(--shadow-color) / 0.6);
  --sh-lg: 0 16px 32px -8px hsl(var(--shadow-color) / 0.65);
  --sh-xl: 0 32px 64px -12px hsl(var(--shadow-color) / 0.75);

  --success-fg: #75e0a7; --success-bg: #0b2b1c; --success-bd: #085d3a; --success-solid: #17b26a;
  --warning-fg: #fec84b; --warning-bg: #2e1f05; --warning-bd: #93370d; --warning-solid: #f79009;
  --danger-fg:  #fda29b; --danger-bg:  #2f0f0d; --danger-bd:  #912018; --danger-solid:  #f04438;
  --info-fg:    var(--accent-200); --info-bg: color-mix(in oklab, var(--accent) 14%, var(--gray-900)); --info-bd: var(--accent-800); --info-solid: var(--accent-400);

  --st-draft-fg:     var(--gray-300); --st-draft-bg:     var(--gray-800);  --st-draft-dot:     var(--gray-500);
  --st-submitted-fg: #7cd4fd;         --st-submitted-bg: #0b2a3d;          --st-submitted-dot: #36bffa;
  --st-verified-fg:  #bdb4fe;         --st-verified-bg:  #221a4d;          --st-verified-dot:  #9b8afb;
  --st-approved-fg:  #75e0a7;         --st-approved-bg:  #0b2b1c;          --st-approved-dot:  #47cd89;
  --st-returned-fg:  #fdba74;         --st-returned-bg:  #34190a;          --st-returned-dot:  #fb923c;
  --st-rejected-fg:  #fda29b;         --st-rejected-bg:  #2f0f0d;          --st-rejected-dot:  #f97066;
  --st-pending-fg:   #fec84b;         --st-pending-bg:   #2e1f05;          --st-pending-dot:   #fdb022;

  --chart-1: var(--brand-400);
  --chart-2: var(--accent-400);
  --chart-3: var(--gold-400);
  --chart-4: #47cd89;
  --chart-5: #9b8afb;
  --chart-6: #f670c7;
  --chart-7: #2ed3b7;
  --chart-8: var(--gray-400);
  --chart-grid: var(--gray-800);
}

/* ------------------------------------------------------------------ 4. Bootstrap 5.3 mapping */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-base);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--surface-page);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-hover);
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface-2);
  --bs-heading-color: var(--text);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-xxl: var(--r-xl);
  --bs-border-radius-pill: var(--r-pill);
  --bs-box-shadow: var(--sh-md);
  --bs-box-shadow-sm: var(--sh-sm);
  --bs-box-shadow-lg: var(--sh-lg);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-link-color-rgb: 179, 32, 44;
  --bs-link-hover-color-rgb: 147, 26, 37;
  --bs-primary: var(--primary);
  --bs-primary-rgb: 179, 32, 44;
  --bs-primary-text-emphasis: var(--primary-soft-text);
  --bs-primary-bg-subtle: var(--primary-soft);
  --bs-primary-border-subtle: var(--brand-200);
  --bs-success-text-emphasis: var(--success-fg);
  --bs-success-bg-subtle: var(--success-bg);
  --bs-success-border-subtle: var(--success-bd);
  --bs-warning-text-emphasis: var(--warning-fg);
  --bs-warning-bg-subtle: var(--warning-bg);
  --bs-warning-border-subtle: var(--warning-bd);
  --bs-danger-text-emphasis: var(--danger-fg);
  --bs-danger-bg-subtle: var(--danger-bg);
  --bs-danger-border-subtle: var(--danger-bd);
  --bs-info-text-emphasis: var(--info-fg);
  --bs-info-bg-subtle: var(--info-bg);
  --bs-info-border-subtle: var(--info-bd);
  --bs-focus-ring-color: var(--focus-ring);
  --bs-focus-ring-width: 3px;
  --bs-form-valid-color: var(--success-fg);
  --bs-form-valid-border-color: var(--success-solid);
  --bs-form-invalid-color: var(--danger-fg);
  --bs-form-invalid-border-color: var(--danger-solid);
  --bs-highlight-bg: var(--gold-100);
}

[data-bs-theme="dark"] {
  --bs-link-color-rgb: 238, 151, 160;
  --bs-link-hover-color-rgb: 246, 196, 200;
  --bs-primary-rgb: 208, 50, 63;
  --bs-primary-border-subtle: var(--brand-800);
  --bs-highlight-bg: var(--gold-900);
}