/* ===========================================================================
   sharkbyte.css — the SHIPPED design system, transcribed for the web.

   Every value here is lifted verbatim from the app's four owning modules:
     constants/Colors.ts        — the grounds, the plate, the seam
     constants/Terminal.ts      — the Ink Terminal palette + radii + grid
     constants/DesignTokens.ts  — spacing, type scale, brand colors
     utils/heatScale.ts         — the heat bases and alpha ladders

   Nothing is invented. If a value is not in one of those four modules it does
   not appear here. DARK FINISH ONLY for round 1 (the cave); the light finish
   tokens are carried alongside so the derivation is visible, not guessed.
   =========================================================================== */

/* --- the real bundled faces (assets/fonts/) ------------------------------ */
@font-face {
  font-family: 'DepartureMono';
  src: url('DepartureMono-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: block;
}
/* Ink Terminal Mono — the app's renamed Cascadia Mono cut (captain decision
   2026-08-14; provenance in NOTICE-ink-terminal-mono.md). One variable file
   per weight token with the wght axis default pinned to the token's weight,
   exactly as the app ships them (DesignTokens.ts mono/monoMedium/monoSemiBold).
   Re-copied from shrkbyt-mobile/assets/fonts/ 2026-08-20 — re-copy if the
   app's cut changes again. */
@font-face {
  font-family: 'InkTerminalMono';
  src: url('InkTerminalMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'InkTerminalMono';
  src: url('InkTerminalMono-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'InkTerminalMono';
  src: url('InkTerminalMono-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Rubik';
  src: url('Rubik-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Rubik';
  src: url('Rubik-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Rubik';
  src: url('Rubik-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: block;
}

:root {
  /* Colors.dark / TerminalPalettes.dark — the navy-black console ground.
     NOTE: this SUPERSEDES the "#1F1F1D Departure charcoal" in older briefs;
     the charcoal was corrected to navy-black by captain ruling 2026-07-22
     (Colors.ts:4-13). */
  --bg:        #020916;   /* Terminal.bg      / Colors.dark.background */
  --deep:      #01060F;   /* Terminal.bgDeep  / Colors.dark.backgroundDepth */
  --raised:    #101725;   /* Terminal.bgRaised */
  --plate:     #0B111E;   /* Colors.dark.cardSurface — THE PLATE */
  --seam:      rgba(220, 226, 238, .13);  /* Colors.dark.cardBorder */
  --divider:   rgba(220, 226, 238, .08);  /* Terminal.divider */
  --gridline:  rgba(220, 226, 238, .05);  /* Terminal.gridline */

  --text:      #E3E5EB;   /* Terminal.text  */
  --dim:       #9EA3AE;   /* Terminal.dim   */
  --faint:     #676A76;   /* Terminal.faint */

  --intel:     #62ED40;   /* Terminal.intel — the ONLY glow; the model's voice */
  --intel-dim: rgba(98, 237, 64, .55);
  --intel-wash:rgba(98, 237, 64, .05);
  --sage:      #BFE4A7;   /* Terminal.sage — the intelligence at rest (S.H.A.R.C) */
  --sage-dim:  rgba(191, 228, 167, .45);

  --signal:    #E8B85C;   /* Terminal.signal — market-structure amber */
  --move-up:   #6FE0A0;   /* Terminal.moveUp */
  --move-down: #FF6B6B;   /* Terminal.moveDown */

  /* heatScale.ts — hue carries direction, alpha carries intensity */
  --amber-ink: #D29922;   /* RGB.disagreeUp  (disagree-up)   */
  --teal-ink:  #3BC0C8;   /* DISAGREE_DOWN_INK.dark          */
  --pos-ink:   #3AC754;   /* STRENGTH_INK.pos.dark           */
  --neg-ink:   #FA807A;   /* STRENGTH_INK.neg.dark           */

  /* BrandColors (DesignTokens.ts) — brand moments ONLY, never data surfaces */
  --brand-navy: #0A1024;
  --brand-mint: #CAE5B3;

  /* TerminalRadius */
  --r-module: 4px;  --r-panel: 6px;  --r-chip: 4px;  --r-card: 10px;

  /* BlueprintGrid — the light finish's ground texture (dark opts in only
     where a surface asks for it: Terminal.ts BlueprintGrid.colorDark) */
  --grid-dark: rgba(98, 130, 190, .055);
  --grid-pitch: 18px;

  /* Spacing (DesignTokens.Spacing) */
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px;
  --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 48px;

  /* the three faces, by their app-side job */
  --console: 'DepartureMono', ui-monospace, monospace;  /* chrome ≥12px, short uppercase */
  --mono:    'InkTerminalMono', ui-monospace, monospace;/* every numeral, tabular */
  --body:    'Rubik', system-ui, sans-serif;            /* prose */
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chrome type — the console face. §7.15: ≥12px, short, uppercase, never data. */
.chrome {
  font-family: var(--console);
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Data type — Ink Terminal Mono, always tabular so columns lock. */
.data { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* THE PLATE (contract §7.13): solid near-ground fill + the 1px seam.
   Shadow is ZERO everywhere — the seam does all separation. */
.plate {
  background: var(--plate);
  border: 1px solid var(--seam);
  border-radius: var(--r-module);
  box-shadow: none;
}

a { color: inherit; }

/* ===========================================================================
   THE PAPER FINISH — added for the full-page build (2026-08-10).

   Round 1's §9 derivation table, now built. Every value is the shipped light
   twin of the dark token above it, transcribed from the same four modules:

     constants/Colors.ts:20-52       cream #FBF9F4 · well #EEECE6 · plate
                                     #FEFDFA · seam rgba(16,36,61,.17)
     constants/Terminal.ts:117-171   TerminalLight — navy ink #10243D /
                                     #5B6675 / #8F96A3, printed ink-green
                                     #337B36, leaf #4F8B4A, bronze #8F6A1C
     utils/heatScale.ts:48-70        same hue bases; paper multiplies alpha
                                     by 1.45 (alphaFor) — done in sb.js by
                                     passing scheme:'light'
     constants/Terminal.ts BlueprintGrid  rgba(62,84,132,.085) @ 18px pitch

   THE ONE THING THAT DOES NOT DERIVE — the CTA. Mint on cream is a brand
   color used as a highlighter: it neither fills nor reads. The answer is not
   a new color, it is the shipped brand-tile law: the brand moment carries
   BrandColors.navy in BOTH finishes (constants/DesignTokens.ts:115-121,
   BrandTile:125 — "The tile carries BrandColors.navy in BOTH finishes"). So
   the slab INVERTS and the brand pair survives: mint ground / navy ink on
   the cave, navy ground / mint ink on paper. The button stays the loudest
   object on its ground in both.
   =========================================================================== */

:root {
  --cta-bg:  var(--brand-mint);
  --cta-ink: var(--brand-navy);
  --ground-grid: none;
  /* A nameplate strip is a RECESS. On the cave a recess is darker than the
     plate, so it is the page ground; on paper wells recess by darkening
     (Colors.light comment), so it is the well. One token, both laws. */
  --nameplate: var(--bg);
}

:root[data-finish='light'] {
  --bg:        #FBF9F4;   /* Colors.light.background — cream paper */
  --deep:      #EEECE6;   /* Colors.light.backgroundDepth — the recessed well */
  --raised:    #F5F3ED;   /* Colors.light.backgroundDepthAlt */
  --plate:     #FEFDFA;   /* Colors.light.cardSurface — THE PLATE */
  --seam:      rgba(16, 36, 61, .17);  /* Colors.light.cardBorder */
  --divider:   rgba(16, 36, 61, .10);  /* TerminalLight.divider */
  --gridline:  rgba(16, 36, 61, .06);  /* TerminalLight.gridline */

  --text:      #10243D;   /* navy ink, 14.9:1 on cream */
  --dim:       #5B6675;
  --faint:     #8F96A3;

  --intel:     #337B36;   /* printed ink-green — the voice, in pigment */
  --intel-dim: rgba(51, 123, 54, .75);
  --intel-wash:rgba(51, 123, 54, .06);
  --sage:      #4F8B4A;   /* leaf */
  --sage-dim:  rgba(79, 139, 74, .45);

  --signal:    #8F6A1C;   /* the amber goes bronze to hold 4.5:1 as pill text */
  --move-up:   #148055;
  --move-down: #C93B3B;

  /* heat: same hues, printed pigments where the doc publishes one */
  --amber-ink: #8F6A1C;
  --teal-ink:  #0E7A86;
  --pos-ink:   #2EA043;
  --neg-ink:   #F85149;

  /* the blueprint grid is the paper's ground texture (contract §7.14) */
  --ground-grid:
    repeating-linear-gradient(to right,  rgba(62,84,132,.085) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(to bottom, rgba(62,84,132,.085) 0 1px, transparent 1px 18px);

  /* the brand moment inverts; the pair does not (BrandTile: navy in both) */
  --cta-bg:  var(--brand-navy);
  --cta-ink: var(--brand-mint);
  --nameplate: var(--deep);
}