/* =====================================================================
   Lepus Data: design tokens, palette A "Cobalt & Sun"
   Loaded by every page before its own styles.
   Every text/background pair below was checked against WCAG 2.1 AA
   (4.5:1 text, 3:1 large text, control borders and focus).
   Layer 1, primitives: raw values. Components never use these directly.
   ===================================================================== */
:root {
  /* Navy: brand and dark surfaces */
  --navy-950: #070F1F;
  --navy-900: #0A1A33;
  --navy-800: #132A4D;
  --navy-750: #0F1C33;
  --navy-700: #22345A;
  --navy-650: #223A63;
  --navy-620: #1A2F52;
  --navy-600: #2A4470;
  --navy-400: #6582B8;
  --navy-300: #9DB0D3;
  --navy-100: #E8EEFA;

  /* Slate: text and neutrals on light backgrounds */
  --slate-900: #0B1426;
  --slate-700: #2A3550;
  --slate-600: #4A5670;
  --slate-500: #7B87A1;
  --slate-400: #7F93B8;
  --slate-200: #D5DBE8;
  --slate-100: #E8ECF4;
  --slate-50:  #F3F5FA;
  --white:     #FFFFFF;
  --black:     #000000;

  /* Blue (Cobalt): action */
  --blue-700: #1E40C0;
  --blue-600: #2952E3;
  --blue-300: #8FA8FF;
  --blue-100: #E7EDFF;

  /* Sun: highlight */
  --sun-200: #FFD86B;
  --sun-400: #FFC845;
  --sun-600: #E0AE2E;
  --sun-700: #C28F12;
  --sun-800: #8A5A00;    /* secondary as text on light: 5.9:1 on white */
  --sun-100: #FFF4D6;

  /* Data-viz accents */
  --mint-400:  #6FE3C1;
  --coral-400: #FF7A66;
  --coral-950: #3A1F2A;
  --coral-ink: #1A0D10;

  /* States: text on light / tint behind it / text on dark */
  --green-700: #1B7A4A;  --green-100: #E3F4EA;  --green-300: #5FD39A;
  --red-700:   #B03A2E;  --red-100:   #FBE7E4;  --red-300:   #FF8A7A;

  /* External brand */
  --whatsapp: #25D366;

  /* Translucent white: four levels for text and lines on dark */
  --white-a85: rgba(255, 255, 255, .85);
  --white-a62: rgba(255, 255, 255, .62);
  --white-a35: rgba(255, 255, 255, .35);
  --white-a12: rgba(255, 255, 255, .12);
}

/* =====================================================================
   Layer 2, semantic: what stylesheets use
   ===================================================================== */
:root {
  /* Surfaces */
  --color-bg:                var(--slate-50);
  --color-surface:           var(--white);
  --color-surface-tint:      var(--blue-100);
  --color-surface-inverse:   var(--navy-900);
  --color-surface-inverse-2: var(--navy-800);
  --color-backdrop:          rgba(7, 15, 31, .82);
  --color-media-bg:          var(--black);

  /* Text */
  --color-text:             var(--slate-900);
  --color-text-secondary:   var(--slate-700);
  --color-text-muted:       var(--slate-600);
  --color-text-inverse:     var(--white);
  --color-text-inverse-2:   var(--white-a85);
  --color-text-inverse-3:   var(--white-a62);
  --color-text-accent:      var(--sun-800);    /* secondary colour as text on light */

  /* Borders */
  --color-border:           var(--slate-200);  /* decorative */
  --color-border-control:   var(--slate-500);  /* inputs: 3.6:1 on white */
  --color-border-inverse:   var(--white-a35);  /* controls on dark: 3.2:1 */
  --color-divider-inverse:  var(--white-a12);

  /* Action, links, highlight */
  --color-action:           var(--blue-600);
  --color-action-hover:     var(--blue-700);
  --color-on-action:        var(--white);
  --color-link:             var(--blue-600);
  --color-action-tint:      color-mix(in srgb, var(--blue-600) 12%, transparent);
  --color-highlight:        var(--sun-400);
  --color-on-highlight:     var(--navy-900);
  --color-whatsapp:         var(--whatsapp);
  --color-on-whatsapp:      var(--navy-900);

  /* Focus: blue on light (5.6:1), sun on dark (11.3:1).
     Dark containers switch it with --color-focus: var(--color-focus-inverse). */
  --color-focus:            var(--blue-600);
  --color-focus-inverse:    var(--sun-400);

  /* Feedback: text colour + tint for message backgrounds */
  --color-success:          var(--green-700);
  --color-success-tint:     var(--green-100);
  --color-warning:          var(--sun-800);
  --color-warning-tint:     var(--sun-100);
  --color-danger:           var(--red-700);
  --color-danger-tint:      var(--red-100);
  --color-info:             var(--blue-600);
  --color-info-tint:        var(--blue-100);

  /* Logo mark (hare): head in currentColor, ears in the accent */
  --color-logo-accent:      var(--blue-600);

  /* Animation stage (always dark) */
  --stage-bg:               var(--navy-900);
  --stage-raised:           var(--navy-800);
  --stage-border:           var(--navy-600);   /* decorative frames */
  --stage-wire:             var(--navy-400);   /* lines that carry meaning: 4.5:1 */
  --stage-text:             var(--navy-100);
  --stage-text-muted:       var(--navy-300);
  --stage-dim:              rgba(10, 26, 51, .55);

  /* Data visualisation: categorical series, then roles built on them */
  --viz-1:          var(--sun-400);
  --viz-2:          var(--blue-300);
  --viz-3:          var(--mint-400);
  --viz-alert:      var(--coral-400);
  --viz-raw:        var(--slate-400);
  --viz-clean:      var(--viz-1);
  --viz-gold:       var(--viz-2);
  --viz-insert:     var(--viz-3);
  --viz-update:     var(--viz-1);
  --viz-delete:     var(--viz-alert);
  --viz-alert-bg:   var(--coral-950);
  --viz-alert-ink:  var(--coral-ink);
  --viz-cube-1:     var(--sun-200);
  --viz-cube-2:     var(--sun-600);
  --viz-cube-3:     var(--sun-700);
  --viz-cube-off-1: var(--navy-600);
  --viz-cube-off-2: var(--navy-650);
  --viz-cube-off-3: var(--navy-620);

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-xs:  14px;                      /* captions, small labels */
  --text-sm:  16px;                      /* supporting text, labels, buttons */
  --text-md:  18px;                      /* body */
  --text-lg:  22px;                      /* h3, card titles */
  --text-xl:  28px;                      /* emphasised h3, panel titles */
  --text-2xl: clamp(32px, 4vw, 48px);    /* h2 */
  --text-3xl: clamp(40px, 5vw, 64px);    /* h1 */

  --leading-tight:   1.02;  /* h1 */
  --leading-snug:    1.12;  /* h2, h3 */
  --leading-normal:  1.45;  /* small text */
  --leading-relaxed: 1.6;   /* body */

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.02em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;   /* display font only */

  /* ---------- Spacing (4px base) ---------- */
  --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-section: clamp(64px, 9vw, 112px);
  --space-stack:   clamp(28px, 5vw, 64px);
  --gutter:        clamp(16px, 5vw, 64px);
  --container:     1280px;
  --container-prose: 760px;

  /* ---------- Radii ---------- */
  --radius-xs:    4px;    /* focus ring, small details */
  --radius-sm:    8px;    /* buttons, inputs, selects */
  --radius-md:    12px;   /* small cards, steps, channels */
  --radius-lg:    16px;   /* media cards, form, stage, panel, dialog */
  --radius-pill:  999px;
  --radius-round: 50%;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(10, 26, 51, .06), 0 2px 8px rgba(10, 26, 51, .06);
  --shadow-2: 0 10px 28px rgba(10, 26, 51, .28);
  --shadow-3: 0 24px 64px rgba(7, 15, 31, .45);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* ---------- Layers ---------- */
  --z-menu: 20;
  --z-fab:  30;
  --z-skip: 50;

  /* ---------- Components ---------- */
  --control-height: 44px;  /* minimum touch target */
  --focus-ring-width: 3px;
  --focus-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}

/* =====================================================================
   Dark theme. Opt-in: a page follows the system with
   <html data-color-scheme="auto">; data-theme="dark|light" forces it.
   Pages without the attribute stay light.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root[data-color-scheme="auto"]:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg:             var(--navy-950);
    --color-surface:        var(--navy-750);
    --color-surface-tint:   var(--navy-800);
    --color-text:           var(--navy-100);
    --color-text-secondary: var(--navy-100);
    --color-text-muted:     var(--navy-300);
    --color-text-accent:    var(--sun-400);
    --color-border:         var(--navy-700);
    --color-border-control: var(--navy-400);
    --color-link:           var(--blue-300);
    --color-focus:          var(--color-focus-inverse);
    --color-success:        var(--green-300);
    --color-warning:        var(--sun-400);
    --color-danger:         var(--red-300);
    --color-info:           var(--blue-300);
    --color-logo-accent:    var(--sun-400);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:             var(--navy-950);
  --color-surface:        var(--navy-750);
  --color-surface-tint:   var(--navy-800);
  --color-text:           var(--navy-100);
  --color-text-secondary: var(--navy-100);
  --color-text-muted:     var(--navy-300);
  --color-text-accent:    var(--sun-400);
  --color-border:         var(--navy-700);
  --color-border-control: var(--navy-400);
  --color-link:           var(--blue-300);
  --color-focus:          var(--color-focus-inverse);
  --color-success:        var(--green-300);
  --color-warning:        var(--sun-400);
  --color-danger:         var(--red-300);
  --color-info:           var(--blue-300);
  --color-logo-accent:    var(--sun-400);
}

/* Breakpoints (custom properties cannot be used inside @media):
   sm 600px, md 900px, lg 1100px. */