/* ==========================================================================
   CommerceClarity — Colors & Type
   Core foundation tokens. Import this into any HTML artifact to pick up the
   brand system. Pairs with gradients.css for animated brand surfaces.
   ========================================================================== */

/* ---------- Fonts ----------
   Official brand family: ABC Diatype (sans), ABC Diatype Mono (mono), and
   ABC Otto Light (display accent).
   License: provided by the brand owner. Do not redistribute.
*/
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Mono";
  src: url("fonts/ABCDiatypeMono-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Otto";
  src: url("fonts/ABCOtto-Light.otf") format("opentype");
  /* Otto ships Light only. Declaring the full weight range makes the browser use
     this file for every requested weight (e.g. bold display titles) WITHOUT faux-bolding. */
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Type families ---------- */
  --font-sans: "ABC Diatype", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "ABC Otto", "ABC Diatype", ui-serif, Georgia, serif;   /* ALL big / mega titles (display sizes + h1) use ABC Otto, the editorial display face. Always. */
  --font-display-accent: "ABC Otto", "ABC Diatype", ui-serif, Georgia, serif;
  --font-mono: "ABC Diatype Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (px) ----------
     Display is tight and confident. Body is comfortable 16px.
     13px is an absolute floor: no text renders below 13px, ever
     (caption and overline sit at the floor, not below it). */
  --fs-display-xl: 72px;  --lh-display-xl: 1.02; --tr-display-xl: -0.035em;
  --fs-display-lg: 56px;  --lh-display-lg: 1.04; --tr-display-lg: -0.03em;
  --fs-display-md: 44px;  --lh-display-md: 1.06; --tr-display-md: -0.028em;
  --fs-h1: 36px;          --lh-h1: 1.1;         --tr-h1: -0.025em;
  --fs-h2: 28px;          --lh-h2: 1.15;        --tr-h2: -0.02em;
  --fs-h3: 22px;          --lh-h3: 1.25;        --tr-h3: -0.015em;
  --fs-h4: 18px;          --lh-h4: 1.3;         --tr-h4: -0.01em;
  --fs-body-lg: 18px;     --lh-body-lg: 1.55;
  --fs-body: 16px;        --lh-body: 1.55;
  --fs-body-sm: 14px;     --lh-body-sm: 1.5;
  --fs-caption: 13px;     --lh-caption: 1.4;
  --fs-overline: 13px;    --lh-overline: 1.2;   --tr-overline: 0.14em;
  --fs-mono: 13px;        --lh-mono: 1.5;

  /* ---------- Weights ----------
     ABC Diatype ships Regular (400), Medium (500), Bold (700). "Semibold"
     and "Black" tokens round to the nearest available face so the system
     still reads correctly if the brand family is added to later. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;
  --fw-bold: 700;
  --fw-black: 700;

  /* ==========================================================================
     Brand palette
     Derived directly from the animated gradient specs (Gradient 1/2/3).
     Hues cluster into: deep brand blue, teal, coral, magenta/rose, butter,
     sky, lilac. Anchored by a pure black ink and a neutral warm-white canvas.
     ========================================================================== */

  /* Brand primary — the deep commerce blue from Gradient 1 base */
  --brand-blue-900: #0e2a6d;   /* hsl(221, 77%, 24%) */
  --brand-blue-800: #12377a;
  --brand-blue-700: #1b43a3;   /* ~hsl(220, 74%, 40%) core blue */
  --brand-blue-600: #2a56c4;
  --brand-blue-500: #4477e6;   /* brighter interactive */
  --brand-blue-400: #7aa0f2;
  --brand-blue-300: #b2c9f9;
  --brand-blue-200: #d8e2fb;
  --brand-blue-100: #edf2fe;
  --brand-blue-50:  #f6f8fe;

  /* Teal — secondary accent (deep service green-teal from Gradient 1) */
  --teal-900: #053b3b;
  --teal-700: #0a8585;          /* ~hsl(180, 87%, 28%) */
  --teal-500: #14b8b8;
  --teal-300: #7fdede;
  --teal-100: #d6f4f4;

  /* Coral — warm brand accent (peach/coral from Gradient 1 & 2) */
  --coral-900: #6a2714;
  --coral-700: #c65a38;
  --coral-500: #ef8a5f;          /* ~hsl(20, 79%, 67%) signature coral */
  --coral-300: #f7b896;
  --coral-100: #fde6d8;

  /* Rose — magenta-pink accent (from Gradient 1 & 3) */
  --rose-900: #5b1030;
  --rose-700: #c2306a;           /* ~hsl(340, 67%, 53%) */
  --rose-500: #e86aa1;           /* ~hsl(340, 78%, 67%) */
  --rose-300: #f4a9c8;
  --rose-100: #fce1ec;

  /* Butter — warm highlight (from Gradient 2) */
  --butter-700: #c9a23a;
  --butter-500: #edd46f;         /* ~hsl(60, 80%, 67%) */
  --butter-300: #f5e6a6;
  --butter-100: #fbf5dc;

  /* Sky — soft cool (from Gradient 2) */
  --sky-500: #a2d7f5;            /* ~hsl(200, 89%, 79%) */
  --sky-300: #c9e7f9;
  --sky-100: #ebf5fd;

  /* Lilac — soft cool (from Gradient 3) */
  --lilac-500: #a2a2f5;          /* ~hsl(240, 90%, 79%) */
  --lilac-300: #cacaf9;
  --lilac-100: #eeeefc;

  /* Neutrals — warm-tinted ink ladder */
  --ink-1000: #0a0a0b;   /* near-black, canvas ink */
  --ink-900:  #141418;
  --ink-800:  #1f1f24;
  --ink-700:  #2e2e35;
  --ink-600:  #484852;
  --ink-500:  #6b6b76;
  --ink-400:  #8e8e99;
  --ink-300:  #b4b4bd;
  --ink-200:  #d6d6dc;
  --ink-150:  #e4e4e9;
  --ink-100:  #eeeef2;
  --ink-75:   #f3f3f6;
  --ink-50:   #f8f8fa;
  --ink-25:   #fbfbfc;
  --paper:    #ffffff;

  /* ---------- Semantic color tokens (light) ---------- */
  --bg:            #f2f1f0;            /* light warm-gray canvas (Brand Manual). The page is quiet grey, NOT white and NOT colourful. White (--surface) is for raised cards on top of it. */
  --bg-subtle:     var(--ink-50);
  --bg-muted:      var(--ink-75);
  --bg-inverse:    var(--ink-1000);
  --surface:       var(--paper);
  --surface-raised: var(--paper);
  --surface-sunken: var(--ink-50);

  --fg:            var(--ink-1000);   /* primary text */
  --fg-1:          var(--ink-1000);
  --fg-2:          var(--ink-600);    /* secondary text */
  --fg-3:          var(--ink-500);    /* tertiary / captions */
  --fg-muted:      var(--ink-400);
  --fg-inverse:    var(--paper);
  --fg-on-brand:   var(--paper);

  --border:        var(--ink-150);
  --border-strong: var(--ink-200);
  --border-subtle: var(--ink-100);
  --divider:       var(--ink-100);

  --accent:        var(--ink-1000);   /* primary interactive = near-black ink, NOT blue. Blue is gradient-only. */
  --accent-hover:  var(--ink-800);
  --accent-active: var(--ink-900);
  --accent-fg:     var(--paper);
  --accent-subtle: var(--ink-100);
  --accent-ring:   rgba(10, 10, 11, 0.22);

  --accent-2:      var(--coral-500);  /* warm accent */
  --accent-3:      var(--teal-700);   /* cool accent */
  --accent-4:      var(--rose-700);   /* magenta accent */

  /* Status */
  --success:       #0a8585;
  --success-bg:    #d6f4f4;
  --warning:       #c9a23a;
  --warning-bg:    #fbf5dc;
  --danger:        #c2306a;
  --danger-bg:     #fce1ec;
  --info:          var(--ink-900);    /* neutral ink, not blue */
  --info-bg:       var(--ink-100);

  /* ---------- Data visualization ----------
     One source of truth for every chart (specimens in ui_kits/deck/components/
     and any in-deck chart). Three rules, picked by what the data IS:

       1. SINGLE SERIES, one datum emphasised  -> base bars/marks in --chart-base
          (pale, recedes), the highlighted datum in the canonical --chart-highlight
          gradient. Emphasis by contrast, never by flooding every bar with colour.
       2. UNORDERED CATEGORIES (mix, segments)  -> --chart-1..6, one even lightness
          band so the set reads as a family (no dark-blue-next-to-pale-coral).
       3. PARTS OF A WHOLE / ORDINAL ramp       -> --chart-ramp-1..6, a single-hue
          blue ramp (what the heatmap / calendar / geo tiles already use).

     Always: hairline axes (--chart-axis), a slightly stronger baseline
     (--chart-baseline), mono tick + legend labels (--chart-label / --chart-tick),
     rounded bar caps, NO black fills, ONE highlight gradient (never a per-chart
     bespoke one). In SVG, drive fills with style="fill:var(--chart-N)" (presentation
     attribute fill= does not resolve a CSS variable). */

  /* Unordered-category band — even perceived weight (the -500 row) */
  --chart-1: var(--brand-blue-500);   /* #4477e6 */
  --chart-2: var(--teal-500);         /* #14b8b8 */
  --chart-3: var(--coral-500);        /* #ef8a5f */
  --chart-4: var(--rose-500);         /* #e86aa1 */
  --chart-5: var(--butter-500);       /* #edd46f */
  --chart-6: var(--lilac-500);        /* #a2a2f5 */

  /* Single-hue ramp — parts of a whole / ordinal (dark -> light) */
  --chart-ramp-1: var(--brand-blue-900);  /* #0e2a6d */
  --chart-ramp-2: var(--brand-blue-700);  /* #1b43a3 */
  --chart-ramp-3: var(--brand-blue-600);  /* #2a56c4 */
  --chart-ramp-4: var(--brand-blue-500);  /* #4477e6 */
  --chart-ramp-5: var(--brand-blue-400);  /* #7aa0f2 */
  --chart-ramp-6: var(--brand-blue-300);  /* #b2c9f9 */

  /* Single-series base (recedes) + chart chrome */
  --chart-base:     var(--brand-blue-200);  /* #d8e2fb — quiet base bars/marks */
  --chart-axis:     var(--ink-150);         /* #e4e4e9 — hairline gridlines */
  --chart-baseline: var(--ink-200);         /* #d6d6dc — the zero/axis line */
  --chart-label:    var(--ink-500);         /* #6b6b76 — category + legend text */
  --chart-tick:     var(--ink-400);         /* #8e8e99 — value ticks */

  /* THE one highlight gradient — same sweep as the big-figure / .statement em.
     CSS contexts use the var; SVG uses a <linearGradient> with these exact stops:
     0% #1b43a3 · 34% #0a8585 · 64% #ef8a5f · 100% #e86aa1 */
  --chart-highlight: linear-gradient(92deg, #1b43a3, #0a8585 34%, #ef8a5f 64%, #e86aa1);

  /* ---------- Spacing scale (4px base) ---------- */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ----------
     Brand monogram uses oval stacked shapes — echo this with generous rounding
     on primary surfaces (cards, inputs), and full-pill on buttons/chips. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- Elevation / shadow system ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(14, 42, 109, 0.06);
  --shadow-sm: 0 1px 2px 0 rgba(14, 42, 109, 0.06), 0 2px 4px -1px rgba(14, 42, 109, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(14, 42, 109, 0.08), 0 2px 4px -1px rgba(14, 42, 109, 0.05);
  --shadow-lg: 0 12px 24px -8px rgba(14, 42, 109, 0.14), 0 4px 8px -4px rgba(14, 42, 109, 0.08);
  --shadow-xl: 0 24px 48px -12px rgba(14, 42, 109, 0.22), 0 8px 16px -8px rgba(14, 42, 109, 0.10);
  --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 0 rgba(14, 42, 109, 0.04);
  --ring-focus: 0 0 0 3px var(--accent-ring);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- Content width ---------- */
  --content-sm: 640px;
  --content-md: 840px;
  --content-lg: 1080px;
  --content-xl: 1280px;
  --content-2xl: 1440px;
}

/* ==========================================================================
   Dark mode (optional) — apply via [data-theme="dark"]
   ========================================================================== */
[data-theme="dark"] {
  --bg:            #0a0a0b;
  --bg-subtle:     #111116;
  --bg-muted:      #17171d;
  --bg-inverse:    var(--paper);
  --surface:       #111116;
  --surface-raised:#17171d;
  --surface-sunken:#0a0a0b;

  --fg:            #f4f4f7;
  --fg-1:          #f4f4f7;
  --fg-2:          #b4b4bd;
  --fg-3:          #8e8e99;
  --fg-muted:      #6b6b76;
  --fg-inverse:    var(--ink-1000);

  --border:        #25252c;
  --border-strong: #32323a;
  --border-subtle: #1c1c22;
  --divider:       #1c1c22;

  --accent:        var(--paper);      /* primary interactive on dark = near-white, NOT blue */
  --accent-hover:  var(--ink-100);
  --accent-active: var(--ink-200);
  --accent-fg:     var(--ink-1000);    /* dark text on the light accent */
  --accent-subtle: var(--ink-800);
  --accent-ring:   rgba(255, 255, 255, 0.30);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Element defaults — a tiny "typographic reset" you can rely on.
   Use utility classes (.h1, .body, etc.) where element semantics differ.
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
  font-weight: var(--fw-bold);
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--tr-display-lg);
  font-weight: var(--fw-bold);
}
.display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--tr-display-md);
  font-weight: var(--fw-bold);
}

.body-lg   { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.body      { font-size: var(--fs-body);    line-height: var(--lh-body); }
.body-sm   { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.caption   { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.overline  {
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--fg-2);
}
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

/* Neutral ink selection (not blue) */
::selection { background: var(--ink-200); color: var(--ink-1000); }

/* ==========================================================================
   Gradient text utility — the signature brand "logotype gradient" treatment.
   Use sparingly on short display words.
   ========================================================================== */
.brand-gradient-text {
  background: linear-gradient(92deg, #1b43a3 0%, #0a8585 32%, #ef8a5f 62%, #e86aa1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}