/* Crownlands — the design tokens, one set for every page (light by default, [data-theme="dark"] for dark).
   Values are the homepage's (index.html), the design export's token source. Page stylesheets use these;
   a page keeps only a token of its own (--map-ground, --hero, --sticky-top). */
:root {
  /* ground — parchment, the cards on it, their edges */
  --ink: #F1E9D2;
  --bg-raised: #dcc9a0;
  --surface: #fcf7e7;
  --surface-hi: #fffdf6;
  --border: rgba(74, 54, 22, .18);
  --border-hi: rgba(74, 54, 22, .34);
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --field: #f6efdb;
  --field-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fg' filterUnits='userSpaceOnUse' x='0' y='0' width='180' height='180'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .10 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fg)'/%3E%3C/svg%3E");
  --mark: rgba(200,156,66,.32);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .10 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ink — text on the parchment, the one metal (gold) and light text over dark chrome */
  --bone: #2b2117;
  --muted: #5d4f36;
  --faint: #6c5c3d;
  --gold-hi: #e0bf78;
  --on-dark: #f2ebdf;
  --on-dark-dim: #d3c8af;
  --gilt: #c89c42;
  --on-red: #f1e6cf;
  --rule: rgb(200,156,66);
  --accent-text: #8e2420;
  /* state */
  --ok: #4f7d57;
  --ok-text: #3f6a47;
  --danger-text: #a3352b;
  --bar: #8e2420;
  --warn: #a9741f;
  --danger: #b23b30;
  --info: #4f6f90;
  --info-text: #45627f;
  /* type */
  --f-hero: "Pirata One", "Old English Text MT", Georgia, serif;
  --f-title: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --f-body: "Cairo", "Segoe UI", system-ui, sans-serif;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-body: 1.1875rem;
  /* spacing and layout — an 8px rhythm */
  --s1: 16px;
  --s2: 24px;
  --s3: 32px;
  --s4: 48px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  /* motion */
  --dur-s: 150ms;
  --dur-m: 300ms;
  --dur-l: 400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* the red-cloth button with its weathered gilt rule, and the one cinematic grade for the screenshots */
  --grade: contrast(1.06) saturate(1.08) brightness(.985) sepia(.10) hue-rotate(-6deg);
  --btn-font-size: 1.0625rem;
  --btn-tracking: .06em;
  --btn-pad-x: 32px;
  --btn-on-red: #f1e6cf;
  --btn-red: #8e2420;
  --btn-red-deep: #6a1916;
  --btn-rule-color: rgb(200, 156, 66);
  --btn-rule-inset: 3px;
  --btn-cloth: radial-gradient(ellipse 75% 120% at 50% 50%, transparent 45%, rgba(38, 6, 4, .42) 100%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(255, 220, 190, .04) 0 1px, transparent 1px 3px);
}

[data-theme="dark"] {
  /* ground — parchment, the cards on it, their edges */
  --ink: #0e0c0a;
  --bg-raised: #14120f;
  --surface: #1b1815;
  --surface-hi: #241f1a;
  --border: rgba(255, 240, 220, .08);
  --border-hi: rgba(255, 240, 220, .16);
  --field: #141210;
  --mark: rgba(224,191,120,.28);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ink — text on the parchment, the one metal (gold) and light text over dark chrome */
  --bone: #efe6d2;
  --muted: #b9ad94;
  --faint: #8d8171;
  --accent-text: #e0bf78;
  /* state */
  --ok: #5f9a6a;
  --ok-text: #8cc297;
  --danger-text: #e0897f;
  --bar: #b8892f;
  --warn: #c9933a;
  --danger: #c0463b;
  --info: #6f8fb0;
  --info-text: #9db7d2;
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}