/* =========================================================
   Nule-Legends design tokens
   The one place colours, type, space, depth and motion are defined.
   Components and views use these variables, never raw values.
   Rules for changing them: docs/DESIGN.md.
   The ink (--ink-00 to --ink-4, --shadow-rgb, --text-2, --text-3, --bronze) comes from one palette
   file in css/palettes/: navy, charcoal, violet or greenblack. The line below picks it.
   ========================================================= */
@import url("palettes/charcoal.css");

:root {
  color-scheme: dark;

  /* ---------- Ink: css/palettes/<name>.css (the @import above) ---------- */

  /* ---------- Gold: the crest's metal ---------- */
  --gold: #D6AA52;             /* labels, icons, rules. 8.8:1 on ink-0 */
  --gold-hi: #EDC873;          /* headings, links, focus */
  --gold-lo: #8C6A2A;          /* strong rules, scrollbar */

  /* ---------- Crimson: the crest's lacquer ---------- */
  /* Fills only (primary buttons, gems, the spam notice). Never text on ink: 1.6:1. */
  --crimson: #A8231F;
  --crimson-hi: #BF2D27;
  --crimson-lo: #6E1714;

  /* ---------- Text ---------- */
  --text: #F3EDE0;             /* parchment. 16:1 on ink-0 */
  /* --text-2 (secondary) and --text-3 (captions, placeholders) are set by the palette. */

  /* ---------- Status ---------- */
  --ok: #8CC9AE;
  --ok-bg: rgb(62 120 98 / 0.22);
  --warn: #E8C27A;
  --warn-bg: rgb(214 170 82 / 0.14);
  --danger: #F2A08E;           /* error text on ink. 8.2:1 on ink-0 */
  --danger-bg: rgb(168 35 31 / 0.18);
  --info: #A9C1E8;
  --info-bg: rgb(120 150 210 / 0.14);

  /* ---------- Roles (event themes override only this block) ---------- */
  --accent: var(--gold);                     /* ornaments, icons, active marks */
  --accent-hi: var(--gold-hi);               /* headings, links */
  --action: var(--crimson);                  /* primary button fill, gems */
  --action-hi: var(--crimson-hi);
  --action-lo: var(--crimson-lo);
  --focus: var(--gold-hi);
  --hero-art: url("/assets/hero-background.webp"); /* absolute: url() in a variable resolves where it is used */
  --heading: var(--accent-hi);
  --link: var(--accent-hi);

  /* Hairlines, tinted from the accent so a theme carries through. */
  --line: color-mix(in srgb, var(--accent) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--accent) 36%, transparent);
  --line-soft: rgb(243 237 224 / 0.07);
  --tint: color-mix(in srgb, var(--accent) 10%, transparent);       /* hover wash */
  --tint-strong: color-mix(in srgb, var(--accent) 16%, transparent); /* selected wash */

  /* ---------- Metal and frames: the panel language (css/components/window.css) ---------- */
  /* --bronze (chip and slot rims) is set by the palette. */
  --brass: linear-gradient(180deg, #F2D48A 0%, var(--gold) 38%, #9C7530 100%);   /* selected plates, meters */
  --rule-metal: linear-gradient(90deg, transparent, var(--gold-lo) 12%, var(--gold) 50%, var(--gold-lo) 88%, transparent);
  --frame: color-mix(in srgb, var(--accent) 30%, var(--ink-3));         /* a window's outer rule */
  --frame-hi: color-mix(in srgb, var(--accent) 55%, var(--ink-3));      /* featured window, hover */
  --plate-head: linear-gradient(180deg, color-mix(in srgb, var(--ink-3) 82%, var(--accent)) 0%, var(--ink-2) 100%);
  --plate-body: linear-gradient(180deg, var(--ink-2) 0%, color-mix(in srgb, var(--ink-2) 70%, var(--ink-1)) 100%);
  --bevel: inset 0 1px 0 rgb(243 237 224 / 0.07), inset 0 -1px 0 rgb(var(--shadow-rgb) / 0.6);
  --well: inset 0 2px 6px rgb(var(--shadow-rgb) / 0.7), inset 0 0 0 1px rgb(243 237 224 / 0.04);

  /* ---------- Page painting (the fixed .backdrop): the page's own band art under a veil ---------- */
  --page-art: none;              /* the router sets it: the band's picture, or --camp-art without a band */
  --veil: linear-gradient(180deg, color-mix(in srgb, var(--ink-0) 80%, transparent) 0%, color-mix(in srgb, var(--ink-0) 92%, transparent) 40%, color-mix(in srgb, var(--ink-0) 97%, transparent) 100%);
  --camp-art: url("/assets/hero-background.webp"); /* the lantern camp: home hero, never re-skinned by a theme */

  /* ---------- Type ---------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-control: var(--font-body);  /* buttons, plates, the pager, Show/Hide: sentence case, never tracked capitals */

  /* Fluid scale, 360px to 1440px. Body never drops under 16px. */
  --fs-xs: 0.75rem;                                         /* 12: labels, table heads */
  --fs-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* 13-14: meta, hints */
  --fs-base: clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);      /* 16-17: body */
  --fs-md: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);        /* 16-18: lede */
  --fs-lg: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);    /* 18-21: h4, summary */
  --fs-xl: clamp(1.3125rem, 1.22rem + 0.4vw, 1.625rem);     /* 21-26: h3, card titles */
  --fs-2xl: clamp(1.625rem, 1.45rem + 0.75vw, 2.125rem);    /* 26-34: h2 */
  --fs-3xl: clamp(2rem, 1.65rem + 1.5vw, 3rem);              /* 32-48: page h1 */
  --fs-hero: clamp(2.375rem, 1.75rem + 2.6vw, 3.75rem);     /* 38-60: home h1 only */
  --fs-band: clamp(2.125rem, 1.65rem + 2vw, 3.25rem);       /* 34-52: the page band's h1 */
  --fs-num: clamp(1.75rem, 1.5rem + 0.9vw, 2.375rem);       /* 28-38: display numerals (players, levels) */
  --fs-nav: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem);     /* 14-15: masthead links */
  --fw-display: 600;
  --fw-label: 600;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --tr-display: -0.015em;
  --tr-label: 0.1em;

  /* ---------- Space ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.25rem);          /* page side padding */
  --section: clamp(2.5rem, 1.9rem + 2.5vw, 4rem);           /* between page sections: 40-64 */
  --block: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);        /* between blocks inside a view: 28-40 */

  /* ---------- Layout ---------- */
  --container: 1240px;                                     /* pages without the rail (GM, the noscript note) */
  --shell-max: 1440px;                                     /* ribbon, masthead, band text, content + rail */
  --rail-w: clamp(280px, 21vw, 304px);                    /* server rail column (css/rail.css) */
  --rail-gap: var(--s-6);                                  /* between the content and the rail */
  --app-max: var(--shell-max);
  --narrow: 800px;
  --prose: 68ch;
  --ribbon-h: 36px;                                        /* status ribbon; scrolls away */
  --mast-h: 72px;                                          /* masthead. 64 on phones */
  --head-h: calc(var(--ribbon-h) + var(--mast-h));         /* everything pinned at the top: ribbon + masthead (masthead only on phones) */
  --nav-h: var(--head-h);                                  /* old name, kept for sticky offsets */
  --crest-w: clamp(140px, 8vw + 70px, 196px);              /* the masthead crest */
  --band-h: clamp(180px, 8vw + 110px, 240px);              /* the page band */

  /* ---------- Shape: game windows have tight corners ---------- */
  --r-1: 2px;      /* inner bits: icon boxes, code, tags */
  --r-2: 4px;      /* controls: buttons, inputs, plates */
  --r-3: 6px;      /* surfaces: windows, cards, menus */
  --r-4: 10px;     /* large surfaces: dialog, sheets */
  --r-pill: 999px;

  /* ---------- Depth: one light source, from above ---------- */
  --edge: inset 0 1px 0 rgb(243 237 224 / 0.06);             /* top highlight on raised surfaces */
  --e-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.5), 0 3px 8px -3px rgb(var(--shadow-rgb) / 0.45);
  --e-2: 0 2px 4px rgb(var(--shadow-rgb) / 0.4), 0 14px 28px -10px rgb(var(--shadow-rgb) / 0.65);
  --e-3: 0 4px 10px rgb(var(--shadow-rgb) / 0.45), 0 28px 60px -14px rgb(var(--shadow-rgb) / 0.8);
  --surface: linear-gradient(180deg, color-mix(in srgb, var(--ink-2) 86%, var(--ink-3)) 0%, var(--ink-2) 60%);

  /* ---------- Motion ---------- */
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 200ms;   /* menus, tabs, small reveals */
  --dur-3: 320ms;   /* dialogs, page change */
  --dur-4: 600ms;   /* large reveals */
  --dur-hero: 1600ms; /* the home hero arrival, once */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Stacking ---------- */
  --z-raised: 10;
  --z-header: 300;
  --z-menu: 310;
  --z-toast: 500;
  --z-skip: 600;
}

/* Phones and small tablets: a shorter masthead with the menu button, the crest and the server chip. */
@media (max-width: 900px) {
  :root { --mast-h: 64px; --crest-w: 140px; --head-h: var(--mast-h); } /* phones: the ribbon scrolls away, only the masthead stays */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-hero: 0ms;
  }
}