/* ==========================================================================
   Isle of Bots — brand tokens
   Drop-in replacement for the :root block in incremental.no/styles/site.css
   Owner: Nora (Marketing) · v1.0 · 2026-09-17
   Aesthetic: 1960s–70s screen-printed travel poster. Warm paper, flat inks,
   no gradients-as-decoration, no chrome, no neon, no glow.
   ========================================================================== */

@import url("fonts/fonts.css"); /* self-hosted, SIL OFL — no third-party requests (VISUAL-DIRECTION §4, §10.1) */

:root {
  /* --- Paper & surfaces (the poster stock) --- */
  --bg: #faebcb;            /* sun-bleached paper — page background          */
  --bg-soft: #f0dcae;       /* sand — alternating sections                   */
  --surface: #fff8e6;       /* card / panel                                  */
  --surface-soft: #f7ead0;  /* inset, table stripe, code block               */

  /* --- Ink (type) --- */
  --ink: #05414b;           /* deep lagoon — headings, body on light         */
  --ink-soft: #3c6b6a;      /* secondary text, captions                      */
  --ink-invert: #faebcb;    /* type on dark teal                             */

  /* --- Brand inks --- */
  --brand: #076068;         /* deep teal — primary surfaces, nav, footer     */
  --brand-2: #1e9183;       /* sea teal — links, primary buttons             */
  --lagoon: #41b3a8;        /* shallow water — hovers, highlights, charts    */
  --coral: #e9614a;         /* coral — accent, alerts, "your turn" state     */
  --coral-ink: #b5371f;     /* coral as TYPE — .neg, .error, warnings.       */
                            /* 5.0:1 on --bg, 5.6:1 on --surface; only 4.4:1 */
                            /* on --bg-soft, so bold/large only there. Text  */
                            /* colour, never a fill. Added 2026-09-22.       */
  --sun: #f8991d;           /* amber sun — primary CTA, focus ring           */
  --sun-soft: #f5c05a;      /* amber tint — badges, chart fill               */
  --palm: #2f7a56;          /* palm green — success, growth                  */
  --palm-soft: #7fae83;     /* faded palm — secondary chart series           */
  --hibiscus: #d9557a;      /* hibiscus pink — sparing, one thing per page   */


  /* --- Seat colours (player identity, seats 0-11) -------------------------
     Ruled by Nora 2026-09-18. Two channels: seats 0-5 print SOLID, seats 6-11
     print with a CREAM BAND. The band is load-bearing, not decoration - with
     purple/indigo/electric blue banned and teal+green owned by the sea and the
     jungle, twelve hues that separate by hue alone do not exist in this ink set.
     Measured: no seat is closer than 37 to the sea, jungle or far-sea fill;
     no seat closer than 32 to cream or 37 to ink.
     --seat-2 is deliberately NOT --sun-soft (#F5C05A). They sit 9.7 apart; the
     swap costs 3.6 on the four-player colour-blind margin. Do not merge them. */
  --seat-0:  #e9614a;  /* coral     - solid  (= --coral)                     */
  --seat-1:  #f2a0b5;  /* bubblegum - solid                                  */
  --seat-2:  #f2ce5a;  /* sunflower - solid                                  */
  --seat-3:  #7a2e3f;  /* burgundy  - solid                                  */
  --seat-4:  #7cc46a;  /* leaf      - solid                                  */
  --seat-5:  #8c5a3c;  /* brown     - solid                                  */
  --seat-6:  #eebad4;  /* blush     - banded                                 */
  --seat-7:  #5e3a24;  /* cocoa     - banded                                 */
  --seat-8:  #f8991d;  /* sun       - banded (= --sun)                       */
  --seat-9:  #8a8f2a;  /* olive     - banded                                 */
  --seat-10: #d2a679;  /* tan       - banded                                 */
  --seat-11: #d9557a;  /* hibiscus  - banded (= --hibiscus)                  */
  --seat-band: #fff8e6; /* the cream band on seats 6-11 (= --surface)        */

  /* --- Legacy aliases (match incremental.no naming so components port) --- */
  --accent: var(--sun);
  --accent-2: var(--sun-soft);
  --mint: var(--lagoon);

  /* --- Lines --- */
  --line: rgba(5, 65, 75, 0.16);
  --line-strong: rgba(5, 65, 75, 0.32);
  --line-print: 3px;        /* chunky poster keyline weight                  */

  /* --- Radii: soft and generous, never pill-sharp tech --- */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-round: 999px;

  /* --- Shadow: flat screen-print offset first, soft depth second --- */
  --shadow-print: 5px 5px 0 var(--ink);           /* the signature           */
  --shadow-print-coral: 5px 5px 0 var(--coral);
  --shadow-sm: 0 10px 24px rgba(5, 65, 75, 0.10);
  --shadow-md: 0 24px 56px rgba(5, 65, 75, 0.16);

  /* --- Type --- */
  --font-display: "Fraunces", "Georgia", serif;        /* headlines, numbers */
  --font-text: "Work Sans", "Segoe UI", sans-serif;    /* body, UI           */
  --font-mono: "Space Mono", ui-monospace, monospace;  /* API, turn logs, IDs*/
  --display-variation: "SOFT" 60, "WONK" 1;            /* Fraunces character */
  --tracking-display: -0.015em;
  --tracking-text: 0em;

  /* --- Texture: the paper grain that makes it a print, not a gradient --- */
  --grain-url: url("/brand/texture/paper-grain.png");
  --grain-opacity: 0.35;
}

/* Page: warm paper with a low sun bloom — the only "gradient" allowed. */
body {
  background:
    radial-gradient(1100px 520px at 50% -18%, rgba(248, 153, 29, 0.22), transparent 62%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: var(--tracking-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.7rem); }

/* Links are ink with a brand-2 underline: brand-2 as TEXT on paper is 3.28:1 (Nora, front-page review 0.12 §10). */
a { color: var(--ink); text-decoration-color: var(--brand-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--coral); }

code, kbd, pre, .bot-id, .turn-no { font-family: var(--font-mono); }

/* Poster button: flat fill, ink keyline, hard offset shadow, no gradient. */
.btn-isle {
  background: var(--sun);
  color: var(--ink);
  border: var(--line-print) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-print);
  font-family: var(--font-text);
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-isle:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn-isle:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn-isle:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.card-isle {
  background: var(--surface);
  border: var(--line-print) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-print);
}

/* Paper grain overlay — apply to hero/section wrappers, never to body text. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-url);
  background-size: 320px;
  mix-blend-mode: multiply;
  opacity: var(--grain-opacity);
  pointer-events: none;
}