/* =========================================================
   CIT ITSM Platform — Design Tokens v4
   =========================================================

   Three layers. Use the highest one that says what you mean.

   1. PALETTE      --green-500, --neutral-200 …
                   Raw colours. Never used directly in a component — they say what a
                   colour IS, not what it is FOR, so a palette change would ripple
                   unpredictably.

   2. MEANING      --color-text-muted, --color-border, --tone-danger-bg …
                   What every component uses. Text, surfaces, borders, the accent and
                   six status tones. Contrast is checked here once, so a component
                   built from these is legible without anyone re-measuring.

   3. LEGACY       --primary-green, --gray-400 …
                   Names from before v4, pointed at layer 2 so nothing breaks while
                   screens move to the component library. Do not use in new code.

   Contrast (WCAG AA needs 4.5:1 for text):
     text on white 16.2 · muted text on white 5.07 (was 3.56) · link 5.21 (was 3.98)
     white on accent button 4.66 (was 4.14) · every tone fg on its bg ≥ 5.4

   Typeface: Nunito (SIL Open Font License), served from /fonts — no third-party
   font service at runtime.
   ========================================================= */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/nunito-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/nunito-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nunito-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/nunito-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/nunito-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nunito-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ═════════════════════════════════════════════════════════
     1. PALETTE
     ═════════════════════════════════════════════════════════ */

  /* Green — Gulaid Holding's Deep Saudi Teal, #073130, at 700. The steps above it are the
     brand mixed toward white, the two below mixed toward Charcoal Black, so every tint is
     the brand colour rather than a different green. 600 carries white text at 10.4:1 and is
     the accent; 700 is the mark's own value; 800 is the sidebar. */
  --green-50:  #F5F7F7;
  --green-100: #E6EAEA;
  --green-200: #C8D2D1;
  --green-300: #A1B1B0;
  --green-400: #748C8B;
  --green-500: #436262;
  --green-600: #204645;
  --green-700: #073130;   /* Deep Saudi Teal — the brand */
  --green-800: #0C2B29;
  --green-900: #0F2723;

  /* Gold — Antique Gold, #AA8136, at 500. On white it is 3.56:1, so it is a fill and a mark,
     never body text: 600 is the lightest step that reads (4.71:1). 200 is close to the
     brand's Sand Beige, #EDCF9B, which is a surface colour rather than a text one and sits
     at 200. */
  --gold-50:  #FAF7F3;
  --gold-100: #F3EDE3;
  --gold-200: #EDCF9B;   /* Sand Beige — the brand */
  --gold-300: #D4C09A;
  --gold-400: #C0A26A;
  --gold-500: #AA8136;   /* Antique Gold — the brand */
  --gold-600: #906E30;
  --gold-700: #765C29;
  --gold-800: #5C4923;

  /* Blue — brand secondary. 500 is the brand value; text and links need 600. */
  --blue-50:  #EEF5F9;
  --blue-100: #D9E8F0;
  --blue-200: #B3D0E1;
  --blue-300: #86B2CC;
  --blue-400: #5C98B8;
  --blue-500: #4C86A8;
  --blue-600: #41728F;
  --blue-700: #2D5A74;
  --blue-800: #1F4256;

  /* Red — danger. 500 is the brand danger (there were two reds; this is the one). */
  --red-50:  #FDF0F3;
  --red-100: #FBDCE3;
  --red-200: #F5B3C3;
  --red-300: #EC7F99;
  --red-400: #E3406B;
  --red-500: #D70040;
  --red-600: #B30036;
  --red-700: #8A002A;
  --red-800: #600020;

  --orange-600: #B06A34;   /* only for the "high" step of a severity scale */
  --yellow-500: #C7C400;   /* the brand mark's accent; focus on the dark sidebar */

  /* Microsoft's four squares, for the "Sign in with Microsoft" button and nothing else.
     Trademarked artwork: it has to be these exact colours, so they live here rather than
     being approximated from our own palette. Never use them for anything of ours. */
  --ms-orange: #F25022;
  --ms-green:  #7FBA00;
  --ms-blue:   #00A4EF;
  --ms-yellow: #FFB900;

  /* Neutrals — a cool grey with a trace of the brand green, so greys sit with it. */
  /* Warmed toward Charcoal Black, #191A13 — the brand's own neutral — rather than a pure
     grey, so greys sit with the teal instead of beside it. 500 is the lightest step that
     still reads as muted text on white (4.58:1). */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8F8F8;
  --neutral-100: #F2F2F2;
  --neutral-150: #EDEDEC;
  --neutral-200: #E6E6E5;
  --neutral-250: #DBDCDA;
  --neutral-300: #CECECC;
  --neutral-400: #9A9A97;
  --neutral-500: #757671;
  --neutral-600: #63635F;
  --neutral-700: #51524D;
  --neutral-800: #3C3C36;
  --neutral-900: #2A2B25;
  --neutral-950: #21221B;   /* Charcoal Black, lifted just off pure */

  /* ═════════════════════════════════════════════════════════
     2. MEANING
     ═════════════════════════════════════════════════════════ */

  /* Surfaces */
  --color-bg:               var(--neutral-50);    /* the page behind everything */
  --color-surface:          var(--neutral-0);     /* cards, panels, inputs */
  --color-surface-sunken:   var(--neutral-100);   /* wells, table headers, code */
  --color-surface-hover:    var(--neutral-100);
  --color-surface-selected: var(--green-50);
  --color-backdrop:         color-mix(in srgb, var(--neutral-900) 44%, transparent);

  /* Borders */
  --color-border:         var(--neutral-200);
  --color-border-strong:  var(--neutral-300);
  --color-border-brand:   var(--neutral-250);

  /* Text */
  --color-text-strong:  var(--neutral-950);   /* headings */
  --color-text:         var(--neutral-900);   /* body */
  --color-text-muted:   var(--neutral-500);   /* secondary information — still 5:1 */
  --color-text-subtle:  var(--neutral-400);   /* placeholders and disabled ONLY: below AA */
  --color-text-inverse: var(--neutral-0);
  --color-link:         var(--blue-600);
  --color-link-hover:   var(--blue-700);

  /* The accent — primary buttons, the active item, progress, selection */
  --color-accent:        var(--green-600);
  --color-accent-hover:  var(--green-700);
  --color-accent-active: var(--green-800);
  --color-accent-soft:   var(--green-50);
  --color-accent-text:   var(--green-700);

  /* Focus — one ring everywhere on light surfaces */
  --color-focus: var(--blue-600);
  --focus-ring:  0 0 0 3px color-mix(in srgb, var(--blue-500) 35%, transparent);

  /* Status tones. Every badge, pill, banner and alert picks ONE of these and uses its
     four parts: bg (fill), fg (text on that fill), solid (dots, bars, icons), border. */
  --tone-neutral-bg:     var(--neutral-100);
  --tone-neutral-fg:     var(--neutral-700);
  --tone-neutral-solid:  var(--neutral-400);
  --tone-neutral-border: var(--neutral-200);

  /* "New" is an outline, "done" (success) is a fill — both green, never mistaken for each other. */
  --tone-brand-bg:       var(--neutral-0);
  --tone-brand-fg:       var(--green-700);
  --tone-brand-solid:    var(--green-500);
  --tone-brand-border:   var(--green-300);

  --tone-info-bg:        var(--blue-50);
  --tone-info-fg:        var(--blue-700);
  --tone-info-solid:     var(--blue-500);
  --tone-info-border:    var(--blue-200);

  --tone-success-bg:     var(--green-50);
  --tone-success-fg:     var(--green-700);
  --tone-success-solid:  var(--green-500);
  --tone-success-border: var(--green-200);

  --tone-warning-bg:     var(--gold-50);
  --tone-warning-fg:     var(--gold-700);
  --tone-warning-solid:  var(--gold-500);
  --tone-warning-border: var(--gold-200);

  --tone-danger-bg:      var(--red-50);
  --tone-danger-fg:      var(--red-700);
  --tone-danger-solid:   var(--red-500);
  --tone-danger-border:  var(--red-200);

  /* Severity — risk bands, priority, change risk */
  --sev-low:      var(--green-400);
  --sev-medium:   var(--gold-400);
  --sev-high:     var(--orange-600);
  --sev-critical: var(--red-500);

  /* ── Typography ─────────────────────────────────────────── */
  --font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Size scale */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-body: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* Roles — what a piece of text is. Components use these, not raw sizes. */
  --type-kpi:           var(--text-3xl);   /* the number on a stat tile */
  --type-page-title:    var(--text-2xl);   /* one per page */
  --type-section-title: var(--text-lg);
  --type-card-title:    var(--text-md);
  --type-body:          var(--text-body);
  --type-meta:          var(--text-sm);    /* "by James · 2 h ago" */
  --type-caption:       var(--text-xs);    /* labels, table headers, pills */

  --leading-tight: 1.2;
  --leading-body:  1.5;
  --tracking-tight: -0.02em;   /* titles */
  --tracking-label: 0.06em;    /* UPPERCASE labels */

  /* Heading elements (prose: knowledge-base articles). App screens use the roles above. */
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.75rem;
  --text-h4: 1.5rem;
  --text-h5: 1.25rem;
  --text-h6: 1rem;

  /* ── Space — a 4px grid ─────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* off-grid, kept for existing layouts — do not use in new code */
  --space-7:  30px;
  --space-22: 90px;

  /* ── Shape ──────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
  --radius-control: var(--radius-sm);    /* buttons, inputs, selects */
  --radius-card:    var(--radius-lg);    /* cards, panels, dialogs */
  --radius-pill:    var(--radius-full);  /* badges, avatars */

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-color: 150 20% 10%;
  --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.04), 0 1px 3px hsl(var(--shadow-color) / 0.06);   /* resting card */
  --shadow-2: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 4px 12px hsl(var(--shadow-color) / 0.08);  /* hover, dropdown */
  --shadow-3: 0 4px 12px hsl(var(--shadow-color) / 0.06), 0 10px 30px hsl(var(--shadow-color) / 0.08); /* lifted card */
  --shadow-overlay: 0 12px 32px hsl(var(--shadow-color) / 0.18), 0 2px 6px hsl(var(--shadow-color) / 0.08); /* dialogs, toasts */

  /* ── Layers ─────────────────────────────────────────────── */
  --z-raised:   10;
  --z-sticky:   40;    /* sticky table headers, the top bar */
  --z-header:   50;
  --z-sidebar:  100;
  --z-dropdown: 200;   /* menus, popovers, comboboxes */
  --z-overlay:  300;   /* drawers, dialog backdrops */
  --z-modal:    400;
  --z-toast:    500;
  --z-max:      9999;  /* skip link only */

  /* ── Icons — one line set (components/LineIcons.tsx), never emoji ─ */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.6;

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width: 250px;
  --topbar-height: 60px;
  --content-max:   1280px;
  --form-max:      720px;
  --reading-max:   720px;   /* ~70 characters of body text */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-xfast: 80ms;
  --dur-fast:  150ms;
  --dur-med:   300ms;
  --dur-slow:  420ms;

  /* Breakpoints — for reference; CSS cannot read variables inside @media.
     sm 576 · md 768 · lg 992 · xl 1200 */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* ── App shell: the Deep Saudi Teal sidebar ────────────────
     The brand teal a shade deeper, so white text reads at 15:1. The accent is Sand Beige,
     the brand's own light tone, which carries 10:1 here — Antique Gold itself is only 4.2:1
     against this background, too weak for a marker you are meant to catch at a glance. */
  --sidebar-bg:      var(--green-800);
  --sidebar-bg-top:  var(--green-800);
  --sidebar-text:    var(--neutral-0);
  --sidebar-text-hi: var(--neutral-0);
  --sidebar-hover:   rgb(255 255 255 / 0.10);
  --sidebar-active:  rgb(255 255 255 / 0.16);
  --sidebar-accent:  var(--gold-200);   /* Sand Beige */
  --sidebar-label:   rgb(255 255 255 / 0.82);
  --sidebar-muted:   rgb(255 255 255 / 0.66);
  --sidebar-border:  rgb(255 255 255 / 0.16);

  /* ═════════════════════════════════════════════════════════
     3. LEGACY — pre-v4 names. Do not use in new code.
     ═════════════════════════════════════════════════════════ */
  --primary-green:      var(--color-accent);
  --primary-green-soft: var(--green-400);
  --primary-blue:       var(--blue-500);
  --primary-gold:       var(--gold-500);
  --accent-yellow:      var(--yellow-500);
  --white: var(--neutral-0);
  --black: #000000;

  --success:     var(--green-600);
  --danger:      var(--red-500);
  --danger-soft: var(--tone-danger-bg);
  --warning:     var(--gold-600);
  --info:        var(--blue-600);
  --red:         var(--red-500);

  --gray-50:  var(--neutral-50);
  --gray-100: var(--neutral-100);
  --gray-150: var(--neutral-150);
  --gray-200: var(--neutral-200);
  --gray-250: var(--neutral-250);
  --gray-300: var(--neutral-300);
  --gray-400: var(--color-text-muted);   /* was used as muted TEXT at 3.56:1; now 5:1 */
  --gray-500: var(--neutral-500);
  --gray-600: var(--neutral-600);
  --gray-700: var(--neutral-700);
  --ink:       var(--color-text-strong);
  --body-text: var(--color-text);

  --surface: var(--color-surface);
  --muted:   var(--color-text-muted);
  --border:  var(--color-border);

  --on-tint-green:   var(--tone-brand-fg);
  --on-tint-blue:    var(--tone-info-fg);
  --on-tint-gold:    var(--tone-warning-fg);
  --on-tint-accent:  #7a7804;
  --on-tint-success: var(--tone-success-fg);
  --on-tint-info:    var(--tone-info-fg);
  --on-tint-warning: var(--tone-warning-fg);
  --on-tint-danger:  var(--tone-danger-fg);

  --shadow-subtle: var(--shadow-1);
  --shadow-medium: var(--shadow-2);
  --shadow-card:   var(--shadow-3);
  --shadow-header: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 2px 0 12px hsl(var(--shadow-color) / 0.06);

  /* Referenced by screens but never defined before v4 — so they silently drew nothing. */
  --primary:   var(--color-accent);
  --bg:        var(--color-bg);
  --surface-2: var(--color-surface-sunken);
  --sage-50:   var(--green-50);
  --shadow-md: var(--shadow-2);
}

/* =========================================================
   Base
   ========================================================= */
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
::placeholder { color: var(--color-text-subtle); opacity: 1; }
::selection { background: var(--green-100); }

/* One focus ring for keyboard users, everywhere. */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Respect "reduce motion" across the whole app, not screen by screen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}