/* ============================================================================
   SushiSwim — DESIGN TOKENS
   ----------------------------------------------------------------------------
   This is the ONLY file that should contain raw values. Every color, size,
   space, and duration used anywhere else in the site refers back to a token
   defined here. Change a value here and it changes everywhere, once.

   STATUS: PROVISIONAL.
   The palette is sampled from the approved logo artwork so the page reads as
   one piece. It has not been ratified as the brand system. Nothing here is
   final until James and ChatGPT approve DESIGN_TOKENS.md.
   ========================================================================= */

:root {

  /* --- Palette -------------------------------------------------------------
     Sampled from "SushiSwim and Friends". Named by role, not by hue, so a
     future repaint doesn't require renaming anything.
     ---------------------------------------------------------------------- */

  --c-water-light:   #d3f0f4;   /* sunlit surface  */
  --c-water:         #a5dde6;   /* mid water       */
  --c-water-deep:    #6cc2d2;   /* toward the floor*/
  --c-sand:          #eef6f3;   /* seabed light    */

  --c-ink:           #0a3742;   /* primary text — 9.7:1 on --c-water-light */
  --c-ink-soft:      #2c5f6b;   /* secondary text — 5.1:1 on --c-water-light */

  --c-salmon:        #f0a184;   /* accent, from the fish */
  --c-nori:          #2f4f3e;   /* accent, from the seaweed */

  --c-focus:         #0a3742;   /* focus ring — deliberately high contrast */


  /* --- Semantic surfaces ---------------------------------------------------
     Components reference these, never the palette above. This is the seam
     that makes dark mode and high-contrast mode a token change, not a rewrite.
     ---------------------------------------------------------------------- */

  --surface:         var(--c-water-light);
  --surface-deep:    var(--c-water);
  --text:            var(--c-ink);
  --text-quiet:      var(--c-ink-soft);
  --accent:          var(--c-salmon);


  /* --- Type ----------------------------------------------------------------
     Legibility stack, in priority order:

       1. Atkinson Hyperlegible — Braille Institute; letterforms engineered so
          that b/d, I/l/1, and O/0 cannot be confused. Not yet installed.
       2. Lexend — designed to reduce visual crowding and reading stress.
          Not yet installed.
       3. Verdana — wide apertures, generous default spacing, present on
          effectively every device. This is what actually renders today.

     To self-host (1) or (2) later: drop the .woff2 files in /assets/fonts/,
     uncomment the @font-face block at the bottom of this file, and change
     nothing else. The stack is already pointing at them.
     ---------------------------------------------------------------------- */

  --font-body: "Atkinson Hyperlegible", "Lexend", Verdana, Geneva,
               system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale. Minimums are deliberately large — small utility text is a
     barrier, and there is no dense UI here to justify it. */
  --t-wordmark:  clamp(2.75rem, 8vw,   5rem);
  --t-question:  clamp(1.5rem,  3.6vw, 2.25rem);
  --t-body:      clamp(1.125rem, 2vw,  1.375rem);
  --t-quiet:     clamp(1rem,    1.6vw, 1.125rem);

  --lh-tight:    1.15;
  --lh-body:     1.7;    /* generous leading aids tracking across lines */
  --ls-body:     0.01em; /* a hair of letter-spacing; reduces crowding */
  --ls-wordmark: -0.005em;

  --measure:     34ch;   /* max line length — nothing runs wider */


  /* --- Space ---------------------------------------------------------------
     One scale, used everywhere. No arbitrary margins.
     ---------------------------------------------------------------------- */

  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2.25rem;
  --sp-5:  3.5rem;
  --sp-6:  5rem;


  /* --- Motion --------------------------------------------------------------
     Slow by default. Nothing here should ever read as urgent, and no motion
     is permitted to flash, strobe, or move the viewport. Every duration below
     is collapsed to 0 under prefers-reduced-motion (see site.css).
     ---------------------------------------------------------------------- */

  --dur-drift:   22s;    /* the hero's idle float */
  --dur-settle:  1.6s;   /* first-paint fade-in   */
  --ease-calm:   cubic-bezier(0.4, 0.0, 0.2, 1);


  /* --- Shape --------------------------------------------------------------- */

  --radius:      1.25rem;
  --ring:        3px;    /* focus ring thickness — WCAG 2.2 focus appearance */
}


/* --- Dark surface ----------------------------------------------------------
   Sensory control belongs to the visitor, and the operating system already
   knows their preference. We honour it rather than asking.
   ------------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --surface:      #06222a;
    --surface-deep: #0a3742;
    --text:         #e7f6f9;
    --text-quiet:   #a9cdd6;
    --c-focus:      #e7f6f9;
  }
}


/* --- High contrast ---------------------------------------------------------
   Triggered by the OS "increase contrast" setting.
   ------------------------------------------------------------------------ */

@media (prefers-contrast: more) {
  :root {
    --surface:    #ffffff;
    --text:       #000000;
    --text-quiet: #000000;
    --c-focus:    #000000;
  }
}


/* ============================================================================
   SELF-HOSTED FONTS — not yet active.
   Uncomment once the .woff2 files exist in /assets/fonts/. No other change
   is needed; --font-body already lists these first.

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

   ========================================================================= */