/* ==========================================================================
   SAMAKI BLUU — GLOBAL DESIGN TOKENS
   The single source of truth. Every colour, type size, space and motion
   value used anywhere in the brand resolves to a token in this file.

   Contrast: every text/background pairing marked AA or AAA below was
   verified programmatically against WCAG 2.2. Ratios are stated inline.
   Do not introduce a raw hex value outside this file.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. CORE PALETTE — raw values. Never use these directly in components;
        use the semantic tokens in section 2.
     ---------------------------------------------------------------------- */

  /* ABYSSAL — the dark ground. Deep-sea reads as absence of light, not as
     corporate navy. This is the deliberate break from the category. */
  --sb-abyss:      #04080B;   /* page ground, dark */
  --sb-deep:       #08141A;   /* raised surface */
  --sb-hull:       #0E2129;   /* card surface */
  --sb-steel:      #17343F;   /* hairline, decorative */
  --sb-slate:      #24515E;   /* muted structure */
  --sb-rig:        #467884;   /* meaning-carrying border — 4.10:1 on abyss */

  /* BLUU — the Pemba Channel spectrum. The name is in the brand. */
  --sb-channel:    #0E7A8A;   /* primary brand teal */
  --sb-current:    #149FAE;   /* interactive */
  --sb-shoal:      #5AD0D6;   /* accent on dark — 10.94:1 on abyss */
  --sb-spray:      #A5E7E5;   /* pale wash */

  /* EMBER — warm accent. RESERVED for verified / live / measured data.
     Never decorative. When you see ember, a number has been checked. */
  --sb-ember:      #E2552B;   /* marks, fills, rules */
  --sb-ember-lt:   #FF7A50;   /* ember text on dark — 7.80:1 on abyss */
  --sb-clove:      #8F3A15;   /* ember text on paper — 6.51:1 on bone */

  /* PAPER — evidence surfaces. Cream, not white: dense data reads as
     document rather than dashboard. */
  --sb-bone:       #F2EEE5;   /* paper ground */
  --sb-salt:       #FBF9F4;   /* raised paper */
  --sb-ash:        #DCD5C6;   /* paper hairline */
  --sb-sand:       #C3B9A5;   /* muted on dark — 10.34:1 on abyss */
  --sb-rope:       #8E8270;   /* border on paper — 3.25:1 on bone */

  /* INK */
  --sb-ink:        #0A1317;   /* body on paper — 16.22:1 on bone */
  --sb-ink-soft:   #44535A;   /* secondary — 6.89:1 on bone */
  --sb-ink-mute:   #5D6A70;   /* caption — 4.82:1 on bone */

  /* STATUS — used for stock-status and verification states. Each one has
     a defined editorial meaning; see /sustainability. */
  --sb-verified:   #2E8B6F;   /* independently verified */
  --sb-verified-lt:#5FCCA8;   /* on dark — 8.16:1 on abyss */
  --sb-caution:    #C8901E;   /* contested / assessment uncertain */
  --sb-caution-lt: #F0B83F;   /* on dark */
  --sb-alert:      #C2412B;   /* stock overfished / claim unsupported */
  --sb-alert-lt:   #FF7D6B;   /* on dark */

  /* ----------------------------------------------------------------------
     2. SEMANTIC TOKENS — dark theme is the default.
     ---------------------------------------------------------------------- */
  --bg:            var(--sb-abyss);
  --bg-raised:     var(--sb-deep);
  --bg-card:       var(--sb-hull);
  --bg-inset:      #060F14;

  --fg:            var(--sb-bone);        /* 17.36:1 */
  --fg-soft:       var(--sb-sand);        /* 10.34:1 */
  --fg-mute:       #8E9BA1;               /* 7.10:1  */

  --line:          var(--sb-steel);
  --line-strong:   var(--sb-rig);
  --line-hair:     rgba(90, 208, 214, 0.14);

  --accent:        var(--sb-shoal);
  --accent-deep:   var(--sb-channel);
  --accent-mid:    var(--sb-current);

  --data:          var(--sb-ember);       /* fills / marks */
  --data-fg:       var(--sb-ember-lt);    /* text */

  --on-accent:     var(--sb-abyss);
  --on-data:       var(--sb-abyss);       /* ember buttons take dark text */

  --ok:            var(--sb-verified-lt);
  --warn:          var(--sb-caution-lt);
  --bad:           var(--sb-alert-lt);

  --focus:         var(--sb-shoal);

  /* PAPER CONTEXT — applied via [data-surface="paper"] on any section.
     Used for evidence-dense pages: the ledger, spec sheets, methodology. */

  /* ----------------------------------------------------------------------
     3. TYPOGRAPHY
        Fraunces  — editorial display. The category is typographically
                    silent; a real display face is the fastest separation.
        Inter Tight — interface and body. Tabular numerals enabled.
        IBM Plex Mono — instrument type. Lot codes, coordinates,
                    temperatures, timestamps. Anything measured.
     ---------------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale — 1.200 minor third at small, 1.333 perfect fourth
     at large. clamp() so nothing needs a breakpoint. */
  --t-xs:   clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --t-sm:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --t-base: clamp(0.9375rem, 0.90rem + 0.19vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --t-lg:   clamp(1.25rem, 1.12rem + 0.62vw, 1.625rem);
  --t-xl:   clamp(1.5rem, 1.25rem + 1.20vw, 2.25rem);
  --t-2xl:  clamp(1.875rem, 1.40rem + 2.30vw, 3.25rem);
  --t-3xl:  clamp(2.375rem, 1.55rem + 4.00vw, 4.75rem);
  --t-4xl:  clamp(2.75rem, 1.40rem + 6.60vw, 7rem);

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --ls-tight:  -0.022em;
  --ls-snug:   -0.012em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-caps:   0.14em;

  /* ----------------------------------------------------------------------
     4. SPACE — 4px base
     ---------------------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  --gutter:  clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --measure: 68ch;
  --wide:    1320px;
  --mid:     1040px;
  --narrow:  760px;

  --section-y: clamp(3.5rem, 2rem + 7vw, 9rem);

  /* ----------------------------------------------------------------------
     5. RADIUS / SHADOW / MOTION
     ---------------------------------------------------------------------- */
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 24px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.65);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.55,.06,.68,.19);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  560ms;
  --dur-xslow: 1100ms;
}

/* --------------------------------------------------------------------------
   PAPER SURFACE — opt-in light context for evidence-dense content.
   Put data-surface="paper" on a <section> and every semantic token flips.
   -------------------------------------------------------------------------- */
[data-surface="paper"] {
  --bg:          var(--sb-bone);
  --bg-raised:   var(--sb-salt);
  --bg-card:     var(--sb-salt);
  --bg-inset:    #EAE5D9;

  --fg:          var(--sb-ink);
  --fg-soft:     var(--sb-ink-soft);
  /* Paper variants are darker than the core palette values because the
     darkest paper surface is --bg-inset (#EAE5D9), not --sb-bone. Each
     value below clears 4.5:1 against bone, salt AND inset. */
  --fg-mute:     #525E64;   /* 5.77 bone · 6.35 salt · 5.31 inset */

  --line:        var(--sb-ash);
  --line-strong: var(--sb-rope);
  --line-hair:   rgba(10, 19, 23, 0.10);

  --accent:      #0B6370;   /* 5.98 bone · 6.58 salt · 5.51 inset */
  --accent-deep: #0A5C68;
  --accent-mid:  #0B6370;

  --data:        var(--sb-ember);
  --data-fg:     var(--sb-clove);

  --on-accent:   var(--sb-salt);
  --on-data:     var(--sb-abyss);

  --ok:          #22694F;   /* 5.66 bone · 6.23 salt · 5.22 inset */
  --warn:        #7E5A0E;   /* 5.40 bone · 5.95 salt · 4.98 inset */
  --bad:         #A83522;   /* 5.67 bone · 6.24 salt · 5.23 inset */

  --focus:       #0B6370;

  background: var(--bg);
  color: var(--fg);
}

/* Reduced motion: honour it everywhere, globally. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms; --dur: 0.01ms;
    --dur-slow: 0.01ms; --dur-xslow: 0.01ms;
  }
}