/* Keel design tokens: Harbor & Signal
   Shared by the case study (index.html), the animation library (system.html) and the
   prototype (/prototype/). The React pages use src/styles/tokens.css, with the same values.

   Cool white and grey surfaces, deep navy type, one lime signal. Source palette:
   MP174 by Alex Cristache (#F4F5FA, #D4EAFF, #F1FF62, #0192C6, #004499, #112358),
   extended with accessible greys, status colors and a dark theme.

   Two tiers, one system:
     1. Brand primitives  (--color-*)   the named palette, never used directly by components
     2. Semantic tokens   (--canvas, --ink, --accent, --positive ...)  what components use
   Dark mode redefines only the semantic tier.

   Every ratio quoted here is WCAG 2.x, produced by source/contrast_audit.py.        */

:root {
  /* ---------------------------------------------------------- 1. brand primitives */
  --color-fog:     #F4F5FA; /* Fog White: the light canvas */
  --color-paper:   #FFFFFF; /* Paper: cards and panels */
  --color-cloud:   #E9EDF5; /* Cloud: wells, disabled, quiet fills */
  --color-mist:    #D4EAFF; /* Mist Blue: the water band, info tints */
  --color-signal:  #F1FF62; /* Signal Lime: the one accent. A fill, never text on light */
  --color-ocean:   #0192C6; /* Ocean Blue: the highlighted data series */
  --color-harbor:  #004499; /* Harbor Blue: links and focus on light */
  --color-deep:    #112358; /* Deep Navy: type, primary actions, the dark surface */
  --color-slate:   #4A5573; /* Slate: secondary type (6.8:1 on fog, 7.4:1 on paper) */
  --color-abyss:   #0B1530; /* Abyss: the dark canvas */
  --color-night:   #1A2E66; /* Night: dark wells and the dark water band */
  --color-frost:   #AEB9D6; /* Frost: secondary type on dark */
  --color-ocean-lifted: #3DB8EA; /* ocean on dark */

  /* ---------------------------------------------------------- 2. semantic, light */
  color-scheme: light;

  /* surfaces: a grey-white canvas with white cards on it */
  --canvas:    var(--color-fog);
  --surface:   var(--color-paper);
  --surface-2: var(--color-cloud);

  /* text */
  --ink:   var(--color-deep);    /* 13.7:1 on fog, 14.9:1 on paper, 12.7:1 on cloud */
  --ink-2: var(--color-slate);   /* 6.8:1 on fog, 6.3:1 on cloud, 6.0:1 on mist */
  --ink-3: var(--color-slate);
  --ink-2-on-surface: var(--color-slate);

  /* actions: navy fills with a lime label; links in harbor blue */
  --accent:         var(--color-deep);   /* primary buttons, active tab, selected chip */
  --accent-hover:   #1E3576;
  --accent-pressed: #0A1638;
  --on-accent:      var(--color-signal); /* 13.7:1 on navy; 10.5:1 on hover */
  --accent-ink:     var(--color-harbor); /* links, text buttons: 8.4:1 fog, 9.2:1 paper */
  --signal:         var(--color-signal); /* highlight fills, the hull. Needs a navy edge on light */
  --on-signal:      var(--color-deep);

  /* secondary and tertiary actions */
  --secondary-bg:     var(--color-paper);
  --secondary-border: rgba(17, 35, 88, 0.24);
  --tertiary-hover:   rgba(17, 35, 88, 0.05);

  /* disabled: readable, not invisible (6.3:1 on cloud) */
  --disabled-bg:   var(--color-cloud);
  --disabled-ink:  var(--color-slate);

  /* lines */
  --hairline: rgba(17, 35, 88, 0.10); /* decorative edges of cards (1.4.11 exempt) */
  --rule:     rgba(17, 35, 88, 0.14); /* row dividers */
  --control:  rgba(17, 35, 88, 0.62); /* input, chip and switch boundaries: 3.2:1 on mist, more elsewhere */
  --focus:    var(--color-harbor);

  /* status: never lime, never color alone (always with a word or icon) */
  --positive: #0B7350;  /* 5.4:1 fog */
  --negative: #B42342;  /* 5.9:1 fog */
  --warning:  #8A5600;  /* 5.7:1 fog */
  --info:     #0A6A99;  /* 5.5:1 fog */
  --neutral:  var(--color-slate);
  --positive-tint: rgba(11, 115, 80, 0.09);
  --negative-tint: rgba(180, 35, 66, 0.08);
  --warning-tint:  rgba(138, 86, 0, 0.09);
  --info-tint:     rgba(1, 146, 198, 0.10);

  /* data visualization: one navy ramp, ocean blue for the selected series */
  --data-1: #112358;
  --data-2: #3D4E7A;
  --data-3: #6C7899;
  --data-4: #A3ACC4;
  --data-5: #CDD3E2;
  --data-muted: #E3E7F0;
  --data-highlight: var(--color-ocean);  /* 3.5:1 on paper, 3.3:1 on fog: marks, not text */

  /* illustration */
  --illo-line:   var(--color-deep);
  --illo-hull:   var(--color-signal);
  --illo-hull-edge: var(--color-deep); /* lime alone is 1.1:1 on light; the edge carries the contrast */
  --illo-water:  var(--color-mist);
  --illo-ballast: var(--color-deep);

  /* elevation: border first, then a soft navy-tinted shadow only for things that float */
  --lift: 0 1px 2px rgba(17, 35, 88, 0.06), 0 12px 32px -14px rgba(17, 35, 88, 0.20);
  --scrim: rgba(11, 21, 48, 0.40);


  /* glass buttons (assets/css/glass.css) */
  --glass-blur: blur(16px) saturate(150%);
  --glass-primary-bg: rgba(17, 35, 88, 0.86);
  --glass-primary-hover: rgba(17, 35, 88, 0.94);
  --glass-primary-ink: #F1FF62;
  --glass-primary-edge: rgba(255, 255, 255, 0.16);
  --glass-secondary-bg: rgba(255, 255, 255, 0.62);
  --glass-secondary-hover: rgba(255, 255, 255, 0.86);
  --glass-secondary-edge: rgba(17, 35, 88, 0.58);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --glass-shadow: 0 10px 28px -14px rgba(17, 35, 88, 0.45);

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;

  /* type: one family, Switzer (Indian Type Foundry, free via Fontshare), in three levels:
       display  Regular, tight leading, near-zero tracking   (headlines, the hero)
       data     Medium, tabular figures                      (amounts, dates, the reading)
       body     Regular 14 to 17px                           (UI and prose)                  */
  --serif: "Switzer", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;   /* the display role; name kept for the pages that use it */
  --sans:  "Switzer", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --data-weight: 500;

  /* motion: Keel Motion Language (settle, reveal, connect, respond, reassure)
     Durations follow the interaction, not a single global speed. */
  --ease-settle:   cubic-bezier(0.2, 0.7, 0.2, 1);   /* default: decelerates into rest, never overshoots */
  --ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);    /* arrivals: sheets, reveals */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);        /* leaving: quick and quiet */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);      /* state changes in place */
  --ease-lift:     cubic-bezier(0.4, 0, 0.6, 1);      /* symmetric, rare */
  --dur-press:    140ms;  /* button and chip feedback (100 to 160) */
  --dur-hover:    200ms;  /* hover (160 to 220) */
  --dur-card:     280ms;  /* card and row changes (220 to 320) */
  --dur-chart:    520ms;  /* data transitions (350 to 550) */
  --dur-move:     420ms;  /* screens and sheets (350 to 500) */
  --dur-settle:   900ms;  /* the keel finding a new depth: the one physical object */
  --dur-illustration: 1400ms; /* feedback illustrations (900 to 1800) */
  --dur-hero:     4000ms; /* signature animation (2500 to 4000) */
  --stagger:      60ms;   /* sequential reveals */
}

/* ---------------------------------------------------------- 2b. semantic, dark
   Not an inversion: a deep navy night with lime as the action color. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas:    var(--color-abyss);
    --surface:   var(--color-deep);
    --surface-2: var(--color-night);
    --ink:   var(--color-fog);       /* 16.6:1 on abyss, 13.7:1 on deep */
    --ink-2: var(--color-frost);     /* 9.2:1 on abyss, 6.6:1 on night */
    --ink-3: var(--color-frost);
    --ink-2-on-surface: var(--color-frost);
    --accent:         var(--color-signal);   /* in dark, lime is the action color */
    --accent-hover:   #F5FF8C;
    --accent-pressed: #E3F24A;
    --on-accent:      var(--color-deep);     /* 13.7:1 on lime */
    --accent-ink:     var(--color-signal);   /* links and text buttons: 16.5:1 abyss, 11.8:1 night */
    --signal:         var(--color-signal);
    --on-signal:      var(--color-deep);
    --secondary-bg:     var(--color-deep);
    --secondary-border: rgba(244, 245, 250, 0.24);
    --tertiary-hover:   rgba(244, 245, 250, 0.07);
    --disabled-bg:  var(--color-night);
    --disabled-ink: var(--color-frost);
    --hairline: rgba(244, 245, 250, 0.10);
    --rule:     rgba(244, 245, 250, 0.14);
    --control:  rgba(244, 245, 250, 0.50);  /* 3.9:1 on night, 4.5:1 on deep */
    --focus:    var(--color-signal);
    --positive: #5ED3A0;
    --negative: #FF8FA3;
    --warning:  #FFC857;
    --info:     #7CC8F2;
    --neutral:  var(--color-frost);
    --positive-tint: rgba(94, 211, 160, 0.14);
    --negative-tint: rgba(255, 143, 163, 0.14);
    --warning-tint:  rgba(255, 200, 87, 0.14);
    --info-tint:     rgba(124, 200, 242, 0.14);
    --data-1: #F4F5FA;
    --data-2: #B9C3DD;
    --data-3: #8391B8;
    --data-4: #56658F;
    --data-5: #34457A;
    --data-muted: #1F3470;
    --data-highlight: var(--color-ocean-lifted);
    --illo-line:  var(--color-fog);
    --illo-hull:  var(--color-signal);
    --illo-hull-edge: var(--color-signal);
    --illo-water: var(--color-night);
    --illo-ballast: var(--color-frost);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -14px rgba(0, 0, 0, 0.55);
    --scrim: rgba(3, 8, 22, 0.6);
    --glass-primary-bg: rgba(241, 255, 98, 0.92);
    --glass-primary-hover: rgba(245, 255, 140, 0.96);
    --glass-primary-ink: #112358;
    --glass-primary-edge: rgba(255, 255, 255, 0.30);
    --glass-secondary-bg: rgba(244, 245, 250, 0.10);
    --glass-secondary-hover: rgba(244, 245, 250, 0.16);
    --glass-secondary-edge: rgba(244, 245, 250, 0.50);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6);

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas:    var(--color-abyss);
    --surface:   var(--color-deep);
    --surface-2: var(--color-night);
    --ink:   var(--color-fog);       /* 16.6:1 on abyss, 13.7:1 on deep */
    --ink-2: var(--color-frost);     /* 9.2:1 on abyss, 6.6:1 on night */
    --ink-3: var(--color-frost);
    --ink-2-on-surface: var(--color-frost);
    --accent:         var(--color-signal);   /* in dark, lime is the action color */
    --accent-hover:   #F5FF8C;
    --accent-pressed: #E3F24A;
    --on-accent:      var(--color-deep);     /* 13.7:1 on lime */
    --accent-ink:     var(--color-signal);   /* links and text buttons: 16.5:1 abyss, 11.8:1 night */
    --signal:         var(--color-signal);
    --on-signal:      var(--color-deep);
    --secondary-bg:     var(--color-deep);
    --secondary-border: rgba(244, 245, 250, 0.24);
    --tertiary-hover:   rgba(244, 245, 250, 0.07);
    --disabled-bg:  var(--color-night);
    --disabled-ink: var(--color-frost);
    --hairline: rgba(244, 245, 250, 0.10);
    --rule:     rgba(244, 245, 250, 0.14);
    --control:  rgba(244, 245, 250, 0.50);  /* 3.9:1 on night, 4.5:1 on deep */
    --focus:    var(--color-signal);
    --positive: #5ED3A0;
    --negative: #FF8FA3;
    --warning:  #FFC857;
    --info:     #7CC8F2;
    --neutral:  var(--color-frost);
    --positive-tint: rgba(94, 211, 160, 0.14);
    --negative-tint: rgba(255, 143, 163, 0.14);
    --warning-tint:  rgba(255, 200, 87, 0.14);
    --info-tint:     rgba(124, 200, 242, 0.14);
    --data-1: #F4F5FA;
    --data-2: #B9C3DD;
    --data-3: #8391B8;
    --data-4: #56658F;
    --data-5: #34457A;
    --data-muted: #1F3470;
    --data-highlight: var(--color-ocean-lifted);
    --illo-line:  var(--color-fog);
    --illo-hull:  var(--color-signal);
    --illo-hull-edge: var(--color-signal);
    --illo-water: var(--color-night);
    --illo-ballast: var(--color-frost);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -14px rgba(0, 0, 0, 0.55);
    --scrim: rgba(3, 8, 22, 0.6);
    --glass-primary-bg: rgba(241, 255, 98, 0.92);
    --glass-primary-hover: rgba(245, 255, 140, 0.96);
    --glass-primary-ink: #112358;
    --glass-primary-edge: rgba(255, 255, 255, 0.30);
    --glass-secondary-bg: rgba(244, 245, 250, 0.10);
    --glass-secondary-hover: rgba(244, 245, 250, 0.16);
    --glass-secondary-edge: rgba(244, 245, 250, 0.50);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6);

  }
}

/* Utility classes so SVG artwork reads tokens instead of hardcoded hex.
   (Presentation attributes can't take var(); class rules can.) */
.f-ink    { fill: var(--illo-line); }
.f-ink2   { fill: var(--ink-2); }
.f-hull   { fill: var(--illo-hull); }
.f-ballast{ fill: var(--illo-ballast); }
.f-water  { fill: var(--illo-water); }
.f-surface{ fill: var(--surface); }
.f-canvas { fill: var(--canvas); }
.f-accent-ink { fill: var(--accent-ink); }
.s-ink    { stroke: var(--illo-line); }
.s-ink2   { stroke: var(--ink-2); }
.s-accent-ink { stroke: var(--accent-ink); }
.s-hull   { stroke: var(--illo-hull); }
.f-hi     { fill: var(--data-highlight); }   /* the selected data series: ocean blue */
.s-hi     { stroke: var(--data-highlight); }
.s-rule   { stroke: var(--rule); }
.s-control{ stroke: var(--control); }

/* Reduced motion: the OS setting, or the page-level switch (data-motion="reduced"
   on <html>, used by the case study's motion controls). Everything still changes
   state; it just doesn't travel. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-hover: 0ms; --dur-card: 0ms; --dur-chart: 0ms; --dur-move: 0ms;
          --dur-settle: 0ms; --dur-illustration: 0ms; --dur-hero: 0ms; --stagger: 0ms; }
}
:root[data-motion="reduced"] {
  --dur-press: 0ms; --dur-hover: 0ms; --dur-card: 0ms; --dur-chart: 0ms; --dur-move: 0ms;
  --dur-settle: 0ms; --dur-illustration: 0ms; --dur-hero: 0ms; --stagger: 0ms;
}
.f-ink2s  { fill: var(--ink-2-on-surface); }
/* the hull: lime, with a navy edge on light where lime alone is 1.1:1 */
.f-hull   { stroke: var(--illo-hull-edge); stroke-width: 2; vector-effect: non-scaling-stroke; paint-order: stroke; }
/* data level: amounts and dates line up in columns */
.tnum, table, output, time, .amt, .val, .date, .num { font-variant-numeric: tabular-nums; }
.s-ink2s  { stroke: var(--ink-2-on-surface); }