/* ==========================================================================
   Cognative Design System — "Interlock" · v1.0
   Canonical design tokens. Every color derives from the two logo colors:
   Ink #001734 and Cobalt #1D63DC. Neutrals are navy-tinted — no pure gray
   appears anywhere in the system.

   Themes: light is default on :root. Dark applies via OS preference
   (prefers-color-scheme) unless the page opts out with data-theme="light",
   and via an explicit data-theme="dark" stamp.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --cog-ink:    #001734;   /* logo navy — primary text, dark surfaces      */
  --cog-cobalt: #1D63DC;   /* logo blue — the accent; interactive color    */

  /* ---- Cobalt ramp ----------------------------------------------------- */
  --cobalt-50:  #EEF4FE;
  --cobalt-100: #D9E6FC;
  --cobalt-200: #B3CCF9;
  --cobalt-300: #82ABF2;
  --cobalt-400: #4A85E8;
  --cobalt-500: #1D63DC;   /* brand anchor */
  --cobalt-600: #154FB6;
  --cobalt-700: #103D90;
  --cobalt-800: #0B2C6A;
  --cobalt-900: #061C46;
  --cobalt-950: #031029;

  /* ---- Slate ramp (navy-tinted neutrals) ------------------------------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FBFCFE;
  --slate-50:  #F6F8FC;    /* "paper" — the light ground */
  --slate-100: #EEF1F7;
  --slate-200: #E1E6EF;
  --slate-300: #CBD3E1;
  --slate-400: #A5B1C6;
  --slate-500: #7E8CA6;
  --slate-600: #5D6B86;
  --slate-700: #435168;
  --slate-800: #2B394F;
  --slate-900: #14243B;
  --slate-950: #001734;    /* = ink */

  /* ---- Semantic triads (fg / bg / border) ------------------------------ */
  --success-fg:     #0B6B53;
  --success-bg:     #E3F4EC;
  --success-border: #A9DCC8;
  --warning-fg:     #92510A;
  --warning-bg:     #FCF0DF;
  --warning-border: #EFC894;
  --danger-fg:      #B3362E;
  --danger-bg:      #FBEAE8;
  --danger-border:  #F0B4AE;
  --info-fg:        #154FB6;
  --info-bg:        #EEF4FE;
  --info-border:    #B3CCF9;

  /* ---- Data visualization ---------------------------------------------
     Categorical: assign in this fixed order, never cycled. >6 series folds
     into "Other". Always pair color with direct labels and 2px mark gaps —
     never color alone. Validated for CVD + contrast on both surfaces.     */
  --viz-1: #1D63DC;  /* cobalt  */
  --viz-2: #CC7C12;  /* amber   */
  --viz-3: #12A5A0;  /* teal    */
  --viz-4: #7B5BE6;  /* violet  */
  --viz-5: #DE5B7E;  /* rose    */
  --viz-6: #4E9A3E;  /* green   */
  /* Sequential = cobalt ramp (one hue, light→dark).
     Diverging  = cobalt ↔ amber with a slate midpoint.                    */

  /* ---- Surfaces & text (light theme) ----------------------------------- */
  --ground:         var(--slate-50);    /* page background        */
  --surface:        var(--slate-0);     /* cards, panels          */
  --surface-sunken: var(--slate-100);   /* wells, segmented tracks*/
  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --text-primary:   var(--cog-ink);
  --text-secondary: var(--slate-700);
  --text-muted:     var(--slate-500);
  --text-inverse:   #FFFFFF;
  --link:           var(--cobalt-500);
  --link-hover:     var(--cobalt-600);
  --accent:         var(--cobalt-500);
  --accent-hover:   var(--cobalt-600);
  --accent-active:  var(--cobalt-700);
  --chart-surface:  #FFFFFF;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Gabarito", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Spline Sans Mono", "SF Mono", ui-monospace, monospace;

  --text-display-2xl: clamp(2.75rem, 2rem + 3vw, 4rem);     /* hero only  */
  --text-display-xl:  clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  --text-h1: 2.25rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --text-label:   0.78rem;     /* uppercase, tracked +0.08em, weight 600 */
  --text-data:    0.845rem;    /* mono, tabular-nums                     */

  --leading-display: 1.06;
  --leading-heading: 1.2;
  --leading-body:    1.65;
  --tracking-display: -0.015em;
  --tracking-label:    0.08em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* ---- Radius — controls are pills, echoing the logo's rounded caps ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* inputs, alerts        */
  --radius-lg: 20px;     /* cards, panels         */
  --radius-xl: 28px;     /* feature blocks, modals*/
  --radius-full: 999px;  /* buttons, chips, tabs  */

  /* ---- Elevation (always ink-tinted, never black) ---------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 23, 52, 0.06), 0 1px 3px rgba(0, 23, 52, 0.08);
  --shadow-md: 0 2px 4px rgba(0, 23, 52, 0.05), 0 6px 16px rgba(0, 23, 52, 0.09);
  --shadow-lg: 0 4px 12px rgba(0, 23, 52, 0.06), 0 20px 48px rgba(0, 23, 52, 0.16);
  --focus-ring: 0 0 0 3px rgba(29, 99, 220, 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --duration-fast: 120ms;   /* hovers, toggles          */
  --duration-base: 200ms;   /* most transitions         */
  --duration-slow: 320ms;   /* panels, reveals          */
  --duration-page: 480ms;   /* page-level orchestration */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1200px;
  --container-text: 68ch;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* ==========================================================================
   Dark theme — deep brand navy, not gray-dark. Cobalt steps up one stop
   for legibility; dataviz swaps to its dark-validated set.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:         #050F1D;
    --surface:        #0B1B30;
    --surface-sunken: #071527;
    --border:         #22354E;
    --border-strong:  #31455F;
    --text-primary:   #E9EEF6;
    --text-secondary: #A9B7CD;
    --text-muted:     #7E8CA6;
    --text-inverse:   #001734;
    --link:           var(--cobalt-400);
    --link-hover:     var(--cobalt-300);
    --accent:         var(--cobalt-500);
    --accent-hover:   var(--cobalt-400);
    --accent-active:  var(--cobalt-300);
    --chart-surface:  #0A1B30;

    --success-fg: #57C9A2;  --success-bg: #0C2A22;  --success-border: #1D5B47;
    --warning-fg: #E8A94F;  --warning-bg: #2C1F0A;  --warning-border: #6B4E1B;
    --danger-fg:  #F08D85;  --danger-bg:  #2E1210;  --danger-border:  #6E2A25;
    --info-fg:    #82ABF2;  --info-bg:    #0D2140;  --info-border:    #1F447E;

    --viz-1: #4A85E8;  --viz-2: #C9821D;  --viz-3: #17A099;
    --viz-4: #9678F2;  --viz-5: #DB5F80;  --viz-6: #4FA342;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.55);
    --focus-ring: 0 0 0 3px rgba(74, 133, 232, 0.45);
  }
}

:root[data-theme="dark"] {
  --ground:         #050F1D;
  --surface:        #0B1B30;
  --surface-sunken: #071527;
  --border:         #22354E;
  --border-strong:  #31455F;
  --text-primary:   #E9EEF6;
  --text-secondary: #A9B7CD;
  --text-muted:     #7E8CA6;
  --text-inverse:   #001734;
  --link:           var(--cobalt-400);
  --link-hover:     var(--cobalt-300);
  --accent:         var(--cobalt-500);
  --accent-hover:   var(--cobalt-400);
  --accent-active:  var(--cobalt-300);
  --chart-surface:  #0A1B30;

  --success-fg: #57C9A2;  --success-bg: #0C2A22;  --success-border: #1D5B47;
  --warning-fg: #E8A94F;  --warning-bg: #2C1F0A;  --warning-border: #6B4E1B;
  --danger-fg:  #F08D85;  --danger-bg:  #2E1210;  --danger-border:  #6E2A25;
  --info-fg:    #82ABF2;  --info-bg:    #0D2140;  --info-border:    #1F447E;

  --viz-1: #4A85E8;  --viz-2: #C9821D;  --viz-3: #17A099;
  --viz-4: #9678F2;  --viz-5: #DB5F80;  --viz-6: #4FA342;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(74, 133, 232, 0.45);
}

/* ==========================================================================
   Base application
   ========================================================================== */

body {
  background: var(--ground);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}