/* Abyssle design tokens -- the single source of truth for every colour, font size, spacing,
   radius, shadow, z-index layer and animation duration the four pages use. Linked by index.html,
   about.html, privacy.html and admin.html. See docs/DESIGN.md for what each token is for and the
   rule: tokens only, never a raw value, in any of those files or this one.

   Naming note: font-size, spacing and duration tokens are named after the exact pixel/second value
   they hold (e.g. --text-13, --space-10, --duration-250). That is deliberate, not laziness: this
   game already used a wide, specific set of sizes for its pixel-art look, and rounding them onto a
   generic small scale would have changed how pages look. Every value already in use got a token;
   nothing was invented or rounded. If you need a new size, add a new token at that exact value --
   don't reuse a close one that isn't quite right (see docs/DESIGN.md's "adding a token" section). */

:root {
  /* ---- colour: backgrounds (earth gradient, shallow to deep) ---- */
  --bg-sky: #e8c272;     /* warm horizon tone; mirrors shaft.js PALETTE.sunCore family */
  --bg-0: #3b2a1a;       /* gradient top (topsoil) */
  --bg-1: #2a1c10;       /* gradient 30% */
  --bg-2: #17110a;       /* gradient 70% */
  --bg-abyss: #0a0704;   /* gradient bottom (deepest) */

  /* ---- colour: surfaces / panels ---- */
  --surface-panel: rgba(20, 14, 8, .92);      /* default .panel background */
  --surface-panel-low: rgba(20, 14, 8, .55);  /* #screen-play .panel: lighter so the canvas shows through */
  --surface-panel-result: rgba(20, 14, 8, .72); /* result card: between the two above */
  --surface-input: #000a;                      /* text input background */
  --surface-dark-row: #0006;                   /* .run row background */
  --surface-toast: #1a1208;                    /* toast background */
  --surface-invalid: #3a0a16cc;                /* input.bonk (invalid answer) background */
  --surface-banner-danger: #3a0a16;            /* offline banner background (same tone, no alpha) */

  /* ---- colour: borders / dividers ---- */
  --border-line: rgba(255, 179, 71, .25); /* the one divider/border colour used everywhere */

  /* ---- colour: text ---- */
  --text-ink: #f3e9da;   /* primary text */
  --text-muted: #b8a383; /* secondary/muted text */
  --text-dim: #7a6650;   /* tertiary -- dots' idle border, depth-marker labels (shaft.js PALETTE.dim) */

  /* ---- colour: accent (plum) scale ---- */
  --accent-plum: #896fa8;      /* buttons, input border/caret, links-as-accent */
  --accent-plum-light: #a585c6; /* hover state, secondary accent text (tags, h3) */
  --accent-plum-deep: #432e57;  /* button border, deep accent */
  --text-on-accent: #120a18;    /* button label text, sits on the plum background */

  /* ---- colour: accent (amber) -- the game's primary highlight, confusingly named --cyan in the
     original code (kept as an alias below for anything that still reads oddly without it) ---- */
  --accent-amber: #ffb347;  /* logo, links, timer ring default, loading bar (shaft.js PALETTE.cyan) */
  --accent-gold: #ffd166;   /* score/depth readouts, assay heading (shaft.js PALETTE.gold) */

  /* ---- colour: status ---- */
  --success: #8fd16a;        /* admin: saved/ok message */
  --warn: #ffab73;           /* "nothing found" / nothing-recognized feedback text */
  --danger: #ff5b5b;         /* game: timer running out, invalid-answer bonk */
  --border-danger-40: #ff5b5b66; /* --danger at ~40% alpha: offline banner's top border */
  --danger-admin: #ff6b6b;   /* admin: delete/error button + error message (kept distinct from
                                 --danger -- same role, different page, a few % lighter; see
                                 docs/DESIGN.md for why these weren't merged into one shade) */

  /* ---- colour: tier materials (one per rarity tier, docs/DECISIONS.md) ---- */
  --tier-coal: #6b6b78;
  --tier-coal-label: #c9c9d4;  /* Coal's result-list label text; a touch lighter than --tier-coal
                                   for legibility against the dark panel -- pre-existing, kept as-is */
  --tier-iron: #b9846a;
  --tier-gold: #f5c542;
  --tier-sapphire: #3f7dff;
  --tier-ruby: #ff3b63;
  --tier-diamond: #a8f0ff;
  --tier-miss: #475569;

  /* ---- colour: tier material icon shading -- the pure-CSS .mat-N cel-shaded gem/ore icons need
     several extra tones per material beyond the one solid --tier-* accent above (that accent is
     reused directly for Ruby and Diamond's brightest band, noted below). ---- */
  --mat-outline: rgba(0, 0, 0, .8);        /* the stacked 1px drop-shadow outline, every material */
  --mat-outline-cool: rgba(10, 50, 60, .8); /* Diamond's cooler-toned outline */
  --mat-glint: #fff;                        /* the small specular highlight dot, every material */
  --tier-coal-hi: #4a4a54;
  --tier-coal-hi-2: #38383f;  /* pass 6 part B: two extra facet tones so Coal reads as a 5-tone
                                 lumpy chunk, matching Iron's facet count (Spencer, 2026-10-25) */
  --tier-coal-mid: #26262c;
  --tier-coal-dim: #16161a;
  --tier-coal-shadow: #0a0a0d;
  --tier-iron-fleck-1: #c0601c;
  --tier-iron-fleck-2: #b85a1a;
  --tier-iron-fleck-3: #a84f16;
  --tier-iron-hi: #8a7b6c;
  --tier-iron-mid: #6b5d50;
  --tier-iron-shadow: #4d4238;
  --tier-gold-hi: #f6d978;    /* pass 6: tones pulled closer together (~12-14% lightness steps,
                                 was ~24%/16%) -- Spencer, 2026-10-25, "make the three tones closer" */
  --tier-gold-mid: #f0b93e;
  --tier-gold-shadow: #c98f1f;
  --tier-sapphire-1: #cfe0ff;
  --tier-sapphire-2: #a9c9ff;
  --tier-sapphire-3: #7fa6f5;
  --tier-sapphire-4: #4f7fe6;
  --tier-sapphire-5: #3157c4;
  --tier-sapphire-6: #1b2f82;
  --tier-ruby-hi: #ff7d93;        /* --tier-ruby itself is band 2 of 3 */
  --tier-ruby-shadow: #93102e;
  --tier-ruby-1: #ffc4cf;        /* pear-cut facet tones, light to dark */
  --tier-ruby-2: #ff8aa0;
  --tier-ruby-3: #ff4d70;
  --tier-ruby-4: #e0244c;
  --tier-ruby-5: #a8143a;
  --tier-ruby-6: #640a22;
  --tier-diamond-2: #d9c8ff;      /* --tier-diamond itself is band 2 of 6 */
  --tier-diamond-3: #ffd0e6;
  --tier-diamond-4: #c8ffe4;
  --tier-diamond-5: #fff1b8;

  /* ---- colour: overlays (scrims, scanlines, glows) ---- */
  --overlay-scanline: rgba(255, 255, 255, .025);
  --overlay-white-05: rgba(255, 255, 255, .05);
  --overlay-white-10: rgba(255, 255, 255, .1);
  --overlay-white-12: rgba(255, 255, 255, .12);
  --overlay-white-60: rgba(255, 255, 255, .6);
  --overlay-white-65: rgba(255, 255, 255, .65);
  --overlay-plum-12: rgba(137, 111, 168, .12);
  --overlay-plum-14: rgba(137, 111, 168, .14);
  --overlay-plum-50: rgba(137, 111, 168, .5);
  --overlay-amber-06: rgba(255, 179, 71, .06);
  --overlay-amber-18: rgba(255, 179, 71, .18);
  --overlay-dim-30: rgba(122, 102, 80, .3);
  --overlay-black-25: rgba(0, 0, 0, .25);
  --overlay-black-35: rgba(0, 0, 0, .35);
  --overlay-black-06: #0006;
  --overlay-black-07: #0007;
  --overlay-black-08: #0008; /* collapsed with the near-identical #0007 pixel-shadow case it
                                 replaced -- a 1/15 alpha step on a drop shadow; see DESIGN.md */
  --overlay-black-0a: #000a;
  --shadow-plum-33: #432e5755; /* plum-deep at ~33% alpha: the logo's pixel text-shadow, all 4 pages */
  --shadow-plum-40: #432e5766; /* plum-deep at ~40% alpha: the home hero's bigger text-shadow */

  /* ---- fonts ---- */
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-pixel: 'VT323', 'IBM Plex Mono', monospace;

  /* ---- type scale (see naming note above) ---- */
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-34: 34px;
  --text-36: 36px;
  --text-40: 40px;
  --text-52: 52px;
  --text-64: 64px;
  --text-80: 80px;
  --text-86: 86px;
  --text-92: 92px;

  /* ---- spacing scale (see naming note above) ---- */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-34: 34px;
  --space-32: 32px; /* the offline-safe toast's max-width inset, not part of the padding/margin rhythm above */
  --space-60: 60px;

  /* ---- radii ---- */
  --radius-sm: 2px;  /* admin inputs/buttons */
  --radius-pill: 10px; /* admin .pill badges */

  /* ---- shadows (full preset values -- box-shadow and text-shadow both repeat these verbatim) ---- */
  --shadow-panel: 0 0 0 4px var(--overlay-black-25), inset 0 0 40px var(--overlay-black-35);
  --shadow-button: 4px 4px 0 var(--overlay-black-0a);
  --shadow-button-active: 2px 2px 0 var(--overlay-black-0a);
  --shadow-input-focus: 0 0 14px var(--overlay-plum-50);
  --shadow-ring-glow: 0 0 8px var(--accent-amber);
  --overlay-black-85: rgba(0, 0, 0, .85);
  --shadow-legibility: 1px 1px 3px var(--overlay-black-85); /* text-shadow for small text over the canvas */
  --shadow-pixel-logo: 3px 3px 0 var(--shadow-plum-33); /* every page's pixel-font logo */
  --shadow-pixel-hero: 4px 4px 0 var(--shadow-plum-40), 8px 8px 0 var(--overlay-black-07); /* home h1 */
  --shadow-pixel-sm: 2px 2px 0 var(--overlay-black-07);  /* assay heading */
  --shadow-pixel-md: 4px 4px 0 var(--overlay-black-08);  /* depth-big */
  --shadow-ring-danger-glow: 0 0 6px var(--danger); /* timer ring, last 5s */

  /* ---- z-index layers ---- */
  --z-canvas: 0;  /* scanline overlay + #shaft canvas */
  --z-content: 1; /* page content above the canvas */
  --z-toast: 5;
  --z-popup: 6;   /* shaft.js's floating "material found" pop */
  --z-banner: 7;  /* the offline banner, above everything else */

  /* ---- durations ---- */
  --duration-80: .08s;
  --duration-100: .1s;
  --duration-150: .15s;
  --duration-180: .18s;
  --duration-250: .25s;
  --duration-260: .26s;
  --duration-300: .3s;
  --duration-350: .35s;
  --duration-420: .42s;
  --duration-450: .45s;
  --duration-600: .6s;
  --duration-1000: 1s;
  --duration-1300: 1.3s;
  --duration-2200: 2.2s;
  --duration-2600: 2.6s;
  --duration-4000: 4s;
}