/* ==========================================================================
   MKH Marketing Company - Design Tokens
   Accounts & Inventory Web Application

   Adopted from the Claude Design project "MKH Accounts & Inventory"
   (mkh-tokens.css). The colour ramps are still the logo's own values - see
   brand-colors.md for how each was read out of Docs/Logo/logo.pdf - but the
   semantic layer, radii, type and elevation now follow the design.

   Import this file FIRST, before every other stylesheet.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Raw brand ramps (never redefined by a theme) --------------------- */
  --indigo-50:#F3F3FC; --indigo-100:#E3E3F8; --indigo-200:#C3C5EE; --indigo-300:#999BE1;
  --indigo-400:#686BCF; --indigo-500:#3C40BE; --indigo-600:#2E3192; --indigo-700:#252879;
  --indigo-800:#1C1E5E; --indigo-900:#161846; --indigo-950:#0E0F2A;

  --green-50:#EEFCF5; --green-100:#D4F7E5; --green-200:#AAEECB; --green-300:#71E0A6;
  --green-400:#26D97D; --green-500:#0AC263; --green-600:#00A651; --green-700:#008540;
  --green-800:#1A6640; --green-900:#104129; --green-950:#0B281A;

  --sky-50:#EDF6FD; --sky-100:#D2E9F9; --sky-200:#A7D2F1; --sky-300:#6DB2E3;
  --sky-400:#3492D5; --sky-500:#1F7BBD; --sky-600:#1C6EB2; --sky-700:#13598B;
  --sky-800:#0D456D; --sky-900:#0B314B; --sky-950:#081F30;

  --slate-50:#F8F9FC; --slate-100:#EEF0F7; --slate-200:#E1E5EF; --slate-300:#CCD2E0;
  --slate-400:#9FA8BC; --slate-500:#717B94; --slate-600:#515B70; --slate-700:#394256;
  --slate-800:#252C3C; --slate-900:#161B27; --slate-950:#0C1018;

  --amber-50:#FFFAEB; --amber-100:#FEF0C8; --amber-200:#FBDF88; --amber-300:#F8CB4F;
  --amber-400:#F6B81E; --amber-500:#F59F0A; --amber-600:#DA7707; --amber-700:#B35309;
  --amber-800:#91400D; --amber-900:#76350F; --amber-950:#451D08;

  --red-50:#FEF1F1; --red-100:#FDE3E3; --red-200:#F9C7C7; --red-300:#F49A9A;
  --red-400:#EC6565; --red-500:#E13737; --red-600:#D32222; --red-700:#AD1A1A;
  --red-800:#8C1717; --red-900:#6F1515; --red-950:#410B0B;

  --white:#FFFFFF; --black:#000000;

  /* ---- Gradients read straight off the mark ----------------------------- */
  --grad-badge: linear-gradient(45deg, #262878 0%, #242567 18%, #1C6EB2 100%);
  --grad-arrow: linear-gradient(90deg, #1A6640 0%, #3AE665 100%);
  --grad-brand: linear-gradient(140deg, #0E0F2A 0%, #262878 45%, #1A6640 100%);

  /* ---- The navigation rail is dark in BOTH themes: constant brand ------- */
  --rail-bg: linear-gradient(180deg, #12142F 0%, #0E0F2A 55%, #0C0D24 100%);
  --rail-line: rgba(147,152,214,0.14);
  --rail-line-soft: rgba(147,152,214,0.07);
  --rail-txt: #EDEEF9;
  --rail-txt-2: #9FA5CE;
  --rail-txt-3: #6E749C;
  --rail-hover: rgba(147,152,214,0.10);
  --rail-active: rgba(58,230,101,0.07);

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 10px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  13px;
  --fs-base:13.5px;
  --fs-lg:  15px;
  --fs-xl:  17px;
  --fs-2xl: 19px;
  --fs-3xl: 26px;
  --fs-4xl: 32px;

  --fw-regular: 450;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;
  --lh-tight: 1.15;   --lh-normal: 1.5;  --lh-relaxed: 1.62;
  --ls-tight: -0.02em; --ls-wide: 0.02em; --ls-caps: 0.14em;

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 15px; --r-xl: 20px;
  --r-2xl: 26px; --r-full: 999px;

  /* ---- Spacing (4px base) ------------------------------------------------ */
  --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;   --sp-20: 5rem;

  /* ---- Semantic: light -------------------------------------------------- */
  --app-bg: #EEF0F8;
  --app-bloom:
    radial-gradient(900px 520px at 12% -12%, rgba(46,49,146,0.10), transparent 62%),
    radial-gradient(760px 460px at 96% 4%, rgba(0,166,81,0.09), transparent 60%);
  --surface: #FFFFFF;
  --surface-2: #F7F8FC;
  --surface-3: #EEF0F7;
  --surface-glass: rgba(255,255,255,0.78);
  --line: #E3E7F1;
  --line-soft: #EDF0F7;
  --line-strong: #CCD2E0;

  --txt: #1E2534;
  --txt-2: #4C566C;
  --txt-3: #757F98;
  --txt-inv: #FFFFFF;

  --primary: var(--indigo-600);
  --primary-hover: var(--indigo-700);
  --primary-press: var(--indigo-800);
  --primary-fill: linear-gradient(180deg, #383BA6 0%, #2E3192 100%);
  --primary-soft: #EEEEFB;
  --primary-soft-fg: var(--indigo-700);
  --primary-ring: rgba(46,49,146,0.24);

  --accent: var(--green-700);
  --accent-graphic: var(--green-600);
  --accent-fill: linear-gradient(180deg, #0AC263 0%, #008540 100%);
  --accent-soft: #E9FAF1;
  --accent-soft-fg: var(--green-800);

  --ok: var(--green-700); --ok-bg: #E9FAF1; --ok-fg: var(--green-800);
  --warn: var(--amber-600); --warn-bg: #FFF7E6; --warn-fg: var(--amber-800);
  --bad: var(--red-600); --bad-bg: #FEF0F0; --bad-fg: var(--red-700);
  --info: var(--sky-600); --info-bg: #EAF4FD; --info-fg: var(--sky-800);
  --mute: var(--slate-400); --mute-bg: #EEF0F7; --mute-fg: var(--slate-700);

  --credit: var(--green-800);
  --debit: var(--red-700);

  --sh-xs: 0 1px 2px rgba(20,22,58,0.06);
  --sh-sm: 0 1px 2px rgba(20,22,58,0.05), 0 4px 12px -4px rgba(20,22,58,0.10);
  --sh-md: 0 2px 4px rgba(20,22,58,0.05), 0 12px 28px -10px rgba(20,22,58,0.16);
  --sh-lg: 0 4px 8px rgba(20,22,58,0.06), 0 28px 56px -16px rgba(20,22,58,0.22);
  --sh-glow: 0 10px 30px -12px rgba(46,49,146,0.45);
  --edge: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;  --dur-base: 200ms;  --dur-slow: 260ms;

  /* ---- Layers (match the design's stacking) ------------------------------ */
  --z-base: 1; --z-topbar: 40; --z-savebar: 45; --z-scrim: 55;
  --z-rail: 60; --z-menu: 65; --z-toast: 70; --z-drawer: 80;
}

/* ==========================================================================
   Dark theme
   Only the semantic layer moves; the ramps and the rail never do.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --app-bg: #090A1A;
    --app-bloom:
      radial-gradient(900px 520px at 10% -14%, rgba(60,64,190,0.28), transparent 62%),
      radial-gradient(780px 460px at 98% 2%, rgba(0,166,81,0.14), transparent 58%);
    --surface: #14162E;
    --surface-2: #191C38;
    --surface-3: #212545;
    --surface-glass: rgba(20,22,46,0.76);
    --line: #262A52;
    --line-soft: #1F2245;
    --line-strong: #363C6C;

    --txt: #EAECF8;
    --txt-2: #AEB4D6;
    --txt-3: #7F86AE;

    --primary: var(--indigo-400);
    --primary-hover: var(--indigo-300);
    --primary-press: var(--indigo-200);
    --primary-fill: linear-gradient(180deg, #4B4FC9 0%, #3438A8 100%);
    --primary-soft: #1E2152;
    --primary-soft-fg: var(--indigo-200);
    --primary-ring: rgba(153,155,225,0.32);

    --accent: var(--green-500);
    --accent-graphic: var(--green-500);
    --accent-fill: linear-gradient(180deg, #26D97D 0%, #0AC263 100%);
    --accent-soft: #0D2C1F;
    --accent-soft-fg: var(--green-300);

    --ok: var(--green-500); --ok-bg: #0D2C1F; --ok-fg: var(--green-300);
    --warn: var(--amber-500); --warn-bg: #33240A; --warn-fg: var(--amber-300);
    --bad: var(--red-500); --bad-bg: #331113; --bad-fg: var(--red-300);
    --info: var(--sky-500); --info-bg: #0A2338; --info-fg: var(--sky-300);
    --mute: var(--slate-500); --mute-bg: #1C2040; --mute-fg: var(--slate-300);

    --credit: var(--green-400);
    --debit: var(--red-400);

    --sh-xs: 0 1px 2px rgba(0,0,0,0.4);
    --sh-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px -4px rgba(0,0,0,0.5);
    --sh-md: 0 2px 4px rgba(0,0,0,0.4), 0 14px 32px -10px rgba(0,0,0,0.6);
    --sh-lg: 0 4px 10px rgba(0,0,0,0.45), 0 32px 60px -18px rgba(0,0,0,0.7);
    --sh-glow: 0 10px 34px -12px rgba(60,64,190,0.6);
    --edge: inset 0 1px 0 rgba(255,255,255,0.06);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --app-bg: #090A1A;
  --app-bloom:
    radial-gradient(900px 520px at 10% -14%, rgba(60,64,190,0.28), transparent 62%),
    radial-gradient(780px 460px at 98% 2%, rgba(0,166,81,0.14), transparent 58%);
  --surface: #14162E;
  --surface-2: #191C38;
  --surface-3: #212545;
  --surface-glass: rgba(20,22,46,0.76);
  --line: #262A52;
  --line-soft: #1F2245;
  --line-strong: #363C6C;

  --txt: #EAECF8;
  --txt-2: #AEB4D6;
  --txt-3: #7F86AE;

  --primary: var(--indigo-400);
  --primary-hover: var(--indigo-300);
  --primary-press: var(--indigo-200);
  --primary-fill: linear-gradient(180deg, #4B4FC9 0%, #3438A8 100%);
  --primary-soft: #1E2152;
  --primary-soft-fg: var(--indigo-200);
  --primary-ring: rgba(153,155,225,0.32);

  --accent: var(--green-500);
  --accent-graphic: var(--green-500);
  --accent-fill: linear-gradient(180deg, #26D97D 0%, #0AC263 100%);
  --accent-soft: #0D2C1F;
  --accent-soft-fg: var(--green-300);

  --ok: var(--green-500); --ok-bg: #0D2C1F; --ok-fg: var(--green-300);
  --warn: var(--amber-500); --warn-bg: #33240A; --warn-fg: var(--amber-300);
  --bad: var(--red-500); --bad-bg: #331113; --bad-fg: var(--red-300);
  --info: var(--sky-500); --info-bg: #0A2338; --info-fg: var(--sky-300);
  --mute: var(--slate-500); --mute-bg: #1C2040; --mute-fg: var(--slate-300);

  --credit: var(--green-400);
  --debit: var(--red-400);

  --sh-xs: 0 1px 2px rgba(0,0,0,0.4);
  --sh-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px -4px rgba(0,0,0,0.5);
  --sh-md: 0 2px 4px rgba(0,0,0,0.4), 0 14px 32px -10px rgba(0,0,0,0.6);
  --sh-lg: 0 4px 10px rgba(0,0,0,0.45), 0 32px 60px -18px rgba(0,0,0,0.7);
  --sh-glow: 0 10px 34px -12px rgba(60,64,190,0.6);
  --edge: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ==========================================================================
   Compatibility aliases

   The screen stylesheets were written against an earlier token vocabulary.
   Rather than rename several hundred references by hand - every one a chance
   to typo a colour - the old names are kept as aliases onto the new ones.
   They inherit the theme automatically, so nothing has to be repeated in the
   dark block above.

   New work should use the names in the sections above; these exist so the
   two vocabularies can coexist while the rest is migrated.
   ========================================================================== */

:root {
  --bg-body: var(--app-bg);
  --bg-surface: var(--surface);
  --bg-surface-alt: var(--surface-2);
  --bg-sunken: var(--surface-3);
  --bg-inverse: var(--txt);

  --text-primary: var(--txt);
  --text-secondary: var(--txt-2);
  --text-muted: var(--txt-3);
  --text-inverse: var(--surface);
  --text-on-brand: #FFFFFF;
  --text-link: var(--primary);
  --text-link-hover: var(--primary-hover);

  --border-subtle: var(--line-soft);
  --border-default: var(--line);
  --border-strong: var(--line-strong);
  --border-focus: var(--primary);

  --primary-active: var(--primary-press);
  --primary-subtle: var(--primary-soft);
  --primary-subtle-fg: var(--primary-soft-fg);

  --accent-hover: var(--green-800);
  --accent-active: var(--green-900);
  --accent-subtle: var(--accent-soft);
  --accent-subtle-fg: var(--accent-soft-fg);

  --success: var(--ok);   --success-bg: var(--ok-bg);   --success-fg: var(--ok-fg);
  --warning: var(--warn); --warning-bg: var(--warn-bg); --warning-fg: var(--warn-fg);
  --danger: var(--bad);   --danger-bg: var(--bad-bg);   --danger-fg: var(--bad-fg);
  --neutral: var(--mute); --neutral-bg: var(--mute-bg); --neutral-fg: var(--mute-fg);
  /* --info / --info-bg / --info-fg already carry these names. */

  --shadow-xs: var(--sh-xs);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);
  --shadow-xl: var(--sh-lg);
  --ring-focus: 0 0 0 3px var(--primary-ring);
  --ring-danger: 0 0 0 3px rgba(211, 34, 34, 0.24);

  /* The wordmark is Plus Jakarta Sans ExtraBold in the design, not a serif. */
  --font-serif: var(--font-display);

  --z-dropdown: var(--z-menu);
  --z-sticky: var(--z-topbar);
  --z-overlay: var(--z-scrim);
  --z-modal: var(--z-drawer);
}