/* ============================================================================
   LeadsIn design tokens — the single source of truth.

   Change a value here and it propagates everywhere. Nothing in this file is a
   component style; it only declares primitives and the semantic roles that map
   onto them. leadsin.css and every page consume these.

   Layers, in order:
     1. Primitives   raw palette ramps, theme-independent
     2. Typography   family, size, weight, line-height, tracking
     3. Form         spacing, radii, shadows, control heights, z-index
     4. Roles        semantic mapping for light, then dark
     5. Legacy       the historical --li-* names, mapped onto the roles

   Every foreground/background pair below was checked against WCAG 2.1 AA
   (4.5:1 for normal text). The ratios in the comments are measured, not
   estimated. If you change a value, re-check the pair it belongs to.
   ========================================================================= */

:root {
    /* --- 1. PRIMITIVES ---------------------------------------------------
       Brand palette anchors, from the supplied scheme:
         Carbon  #101317   Graphite #343A40   Cool Silver #AAB2BD
         Frost   #F4F7FA   Electric Blue #3B82F6
       The intermediate steps are derived from those anchors so the ramp stays
       in one colour family. */

    /* Neutral ramp. 900/700/400/100 are the supplied greys; the rest fill the
       gaps that a UI needs for borders, muted text and elevation. */
    --li-n-900: #101317;  /* Carbon — bedrock */
    --li-n-800: #24282E;
    --li-n-700: #343A40;  /* Graphite — structural */
    --li-n-600: #5D646C;  /* light-mode secondary text, 5.57 on Frost */
    --li-n-500: #7D848E;  /* placeholders and disabled only — 3.51 on Frost */
    --li-n-400: #AAB2BD;  /* Cool Silver — dark-mode secondary, 8.70 on Carbon */
    --li-n-300: #CBD1D8;
    --li-n-200: #DFE4E9;
    --li-n-100: #F4F7FA;  /* Frost — light canvas */
    --li-n-050: #FFFFFF;

    /* Blue ramp. Electric Blue is the identity colour but only carries white
       text at 3.68:1, so it cannot be a light-mode button background. 600 is
       the darkest step that still reads as the same blue and passes AA. */
    /* Three decorative tints. Deliberately off the semantic hues (green means
       success, amber warning, red danger) so a coloured panel never reads as a
       status by accident. Each ink clears AA on its own tint: 6.89, 7.58, 6.40. */
    --li-tint-sky: #E7F0FE;
    --li-tint-sky-ink: #0B4EA6;
    --li-tint-indigo: #ECEAFB;
    --li-tint-indigo-ink: #4436A8;
    --li-tint-teal: #E2F3EF;
    --li-tint-teal-ink: #0A6157;

    --li-blue-100: #E3EDFD;  /* subtle selected background on light */
    --li-blue-400: #6CA1F8;  /* dark-mode link/accent text, 7.18 on Carbon */
    --li-blue-500: #3B82F6;  /* Electric Blue — dark-mode primary, focus ring */
    --li-blue-600: #0363FF;  /* light-mode primary surface and link text; carries white at 4.6:1 */
    --li-blue-700: #0057E3;  /* hover / pressed */

    /* Semantic ramps. Not in the supplied palette, so they are tuned to sit in
       the same cool family rather than borrowed from a generic set. */
    --li-green-500: #0F7A52;  /* 4.97 on Frost */
    --li-green-400: #4ADE9F;  /* 10.86 on Carbon */
    --li-green-tint-light: #EEF6F3;
    --li-green-tint-dark: #182F2A;

    --li-amber-500: #8A5A00;  /* 5.51 on Frost */
    --li-amber-400: #FBBF24;  /* 11.16 on Carbon */
    --li-amber-tint-light: #F7F3ED;
    --li-amber-tint-dark: #312B19;

    --li-red-500: #B3261E;    /* 6.08 on Frost */
    --li-red-400: #F87171;    /* 6.73 on Carbon */
    --li-red-tint-light: #FAF0EF;
    --li-red-tint-dark: #302024;

    --li-blue-tint-light: #F0F4FB;
    --li-blue-tint-dark: #1D2736;

    /* --- 2. TYPOGRAPHY ---------------------------------------------------
       Whole pixel values only. Body sits at 16px; nothing a user reads for
       comprehension goes below 14px, and 12px is reserved for uppercase
       micro-labels where the tracking below carries legibility.

       To switch the UI face, change --li-font-ui in this one place. Outfit is
       a geometric display face: excellent for headings, weaker for dense data
       because of its low x-height and uniform letterforms. A UI-optimised face
       such as Inter is a better fit for tables and forms — bundle its woff2
       into fonts/, add the @font-face, and change the line below. */
    --li-font-display: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --li-font-ui: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --li-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --li-text-2xs: 12px;   /* uppercase micro-labels, badges */
    --li-text-xs: 14px;    /* table cells, captions, meta */
    --li-text-sm: 15px;    /* help text, secondary copy */
    --li-text-base: 16px;  /* body, inputs, buttons, field labels */
    --li-text-md: 18px;    /* lead-in paragraphs, small headings */
    --li-text-lg: 20px;    /* card headings */
    --li-text-xl: 24px;    /* section headings */
    --li-text-2xl: 30px;   /* page headings, brand */
    --li-text-3xl: 36px;   /* step headings */
    --li-text-4xl: 44px;   /* headline metrics */

    --li-weight-regular: 400;
    --li-weight-medium: 500;
    --li-weight-semibold: 600;
    --li-weight-bold: 700;      /* heaviest used; Outfit above this is too dense for UI */

    --li-leading-tight: 1.15;    /* display sizes */
    --li-leading-snug: 1.3;      /* headings */
    --li-leading-normal: 1.55;   /* body */
    --li-leading-relaxed: 1.65;  /* help text and long copy */

    /* Optical tracking: large type needs negative tracking to stop it looking
       loose, small and uppercase type needs positive tracking to stay legible. */
    --li-tracking-tight: -0.02em;
    --li-tracking-snug: -0.01em;
    --li-tracking-normal: 0;
    --li-tracking-wide: 0.01em;
    --li-tracking-caps: 0.08em;

    /* --- 3. FORM ---------------------------------------------------------- */
    --li-space-1: 4px;
    --li-space-2: 8px;
    --li-space-3: 12px;
    --li-space-4: 16px;
    --li-space-5: 20px;
    --li-space-6: 24px;
    --li-space-8: 32px;
    --li-space-10: 40px;

    --li-radius-sm: 6px;
    --li-radius: 8px;
    --li-radius-lg: 12px;
    --li-radius-pill: 999px;

    /* 44px is the minimum comfortable interactive target. */
    --li-control-h: 44px;
    --li-control-h-sm: 38px;

    /* Motion. Short and eased for state changes, a touch longer for anything
       that grows or reveals, so it reads as soft without feeling slow. */
    --li-ease: cubic-bezier(0.2, 0, 0.2, 1);
    --li-transition-fast: 120ms var(--li-ease);
    --li-transition: 180ms var(--li-ease);
    --li-transition-slow: 260ms var(--li-ease);

    --li-z-dialog: 10000;
    --li-z-toast: 10100;

    /* --- 4. ROLES — LIGHT ------------------------------------------------- */
    --li-surface-page: var(--li-n-100);
    --li-surface-card: var(--li-n-050);
    --li-surface-raised: var(--li-n-050);
    --li-surface-sunk: #EFF3F8;
    --li-surface-nav: var(--li-n-050);

    --li-line: var(--li-n-200);
    --li-line-strong: var(--li-n-300);

    /* Deliberately inverted against the page — toasts and tooltips, which read
       as objects sitting above the UI rather than part of it. */
    --li-surface-inverse: var(--li-n-900);
    --li-fg-inverse: var(--li-n-050);

    --li-fg: var(--li-n-900);          /* 17.32 on page */
    --li-fg-secondary: var(--li-n-600); /* 5.57 on page */
    --li-fg-muted: var(--li-n-500);     /* placeholders only */

    --li-accent: var(--li-blue-600);        /* surfaces that carry white text */
    --li-accent-hover: var(--li-blue-700);
    --li-accent-text: var(--li-blue-700);   /* blue text on a light ground */
    --li-accent-subtle: var(--li-blue-100);
    --li-on-accent: #FFFFFF;                /* 4.76 on --li-accent */
    --li-focus-ring: var(--li-blue-500);

    --li-state-success: var(--li-green-500);
    --li-state-success-bg: var(--li-green-tint-light);
    --li-state-warning: var(--li-amber-500);
    --li-state-warning-bg: var(--li-amber-tint-light);
    --li-state-danger: var(--li-red-500);
    --li-state-danger-bg: var(--li-red-tint-light);
    --li-state-info: var(--li-blue-700);
    --li-state-info-bg: var(--li-blue-tint-light);

    --li-shadow-sm: 0 1px 2px rgba(16, 19, 23, 0.06);
    --li-shadow: 0 8px 24px -12px rgba(16, 19, 23, 0.18);
    --li-shadow-lg: 0 24px 60px -20px rgba(16, 19, 23, 0.28);

    color-scheme: light;
}

/* --- 4b. ROLES — DARK ----------------------------------------------------
   Carbon is the page, with two lighter steps above it for elevation. Graphite
   is used as the structural line colour rather than a surface, which is what
   it is good for at this scale. Cool Silver becomes the secondary text colour,
   the job it is genuinely strong at (8.00 on the card surface). */
html[data-theme="dark"] {
    --li-tint-sky: #16233A;
    --li-tint-sky-ink: #9CC4FB;
    --li-tint-indigo: #1E1A38;
    --li-tint-indigo-ink: #B6ABF5;
    --li-tint-teal: #102A26;
    --li-tint-teal-ink: #7FD3C2;

    --li-surface-page: var(--li-n-900);
    --li-surface-card: #181C21;
    --li-surface-raised: #1F242A;
    --li-surface-sunk: #14181D;
    --li-surface-nav: #14181D;

    --li-line: #2A3037;
    --li-line-strong: var(--li-n-700);

    --li-surface-inverse: #E8EDF7;
    --li-fg-inverse: var(--li-n-900);

    --li-fg: var(--li-n-100);           /* 15.92 on card */
    --li-fg-secondary: var(--li-n-400); /* Cool Silver, 8.00 on card */
    --li-fg-muted: var(--li-n-500);

    --li-accent: var(--li-blue-500);      /* Electric Blue reads correctly here */
    --li-accent-hover: var(--li-blue-400);
    --li-accent-text: var(--li-blue-400); /* 7.18 on page */
    --li-accent-subtle: var(--li-blue-tint-dark);
    --li-on-accent: var(--li-n-900);      /* 5.06 on --li-accent */
    --li-focus-ring: var(--li-blue-400);

    --li-state-success: var(--li-green-400);
    --li-state-success-bg: var(--li-green-tint-dark);
    --li-state-warning: var(--li-amber-400);
    --li-state-warning-bg: var(--li-amber-tint-dark);
    --li-state-danger: var(--li-red-400);
    --li-state-danger-bg: var(--li-red-tint-dark);
    --li-state-info: var(--li-blue-400);
    --li-state-info-bg: var(--li-blue-tint-dark);

    --li-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --li-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --li-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);

    color-scheme: dark;
}

/* --- 5. LEGACY NAMES ------------------------------------------------------
   leadsin.css was written against these names. Mapping them onto the roles
   above means the whole stylesheet re-themes from this file alone, with no
   sweep through 4,000 lines. Prefer the role tokens in new work; these stay
   so nothing has to be rewritten at once.
   --li-fg-subtle and --li-blue were referenced by markup but never declared,
   so they resolved to nothing. They are defined here. */
:root,
html[data-theme="dark"] {
    --li-nav: var(--li-surface-nav);
    --li-panel: var(--li-surface-page);
    --li-card: var(--li-surface-card);
    --li-surface-2: var(--li-surface-raised);
    --li-soft: var(--li-surface-sunk);
    --li-muted-bg: var(--li-accent-subtle);
    --li-border: var(--li-line);

    --li-text: var(--li-fg);
    --li-ink: var(--li-fg);
    --li-secondary: var(--li-fg-secondary);
    --li-muted: var(--li-fg-secondary);
    --li-fg-subtle: var(--li-fg-secondary);

    --li-primary: var(--li-accent);
    --li-primary-dark: var(--li-accent-hover);
    --li-primary-hover: var(--li-accent-hover);
    --li-on-primary: var(--li-on-accent);
    --li-blue: var(--li-accent-text);
    --li-sky: var(--li-accent-text);

    --li-success: var(--li-state-success);
    --li-emerald: var(--li-state-success);
    --li-warning: var(--li-state-warning);
    --li-danger: var(--li-state-danger);

    /* Decorative only — the brand gradient and chart series. */
    --li-rose: #E05260;
    --li-indigo: #5B6CE0;
}

html[data-theme="dark"] {
    --li-rose: #F2727F;
    --li-indigo: #8B95F5;
}