/* Canaan Games design tokens: palette candidate A, "Paper + Stage".
   Single source for colour, type, shape and motion values. style.css and
   components.css only reference these custom properties. The web app manifest
   reads --pwa-theme-color and --pwa-background-color from this file, so a
   palette change happens in one place. Keep colour values as plain hex (or a
   var() of one) so they stay machine-readable. */

@font-face { font-family: "Archivo Expanded"; src: url("fonts/archivo-expanded-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Surfaces */
  --color-paper: #eee9df;
  --color-paper-raised: #faf7f1;
  --color-ink: #11110f;
  --color-stage: #17141f;
  --color-stage-raised: #241f31;
  --color-on-stage: #f2f2ef;

  /* Decision: Motly crimson. A fill means "this moves the game". */
  --color-crimson: #c8102e;
  --color-on-crimson: #f2f2ef;
  --color-crimson-on-stage: #e24e6c;

  /* Status */
  --color-done: #2fc79a;
  --color-danger: #8d1027;
  --color-danger-on-stage: #ff8f9f;

  /* One ink per game type: card band, lobby code, turn header, reveal frame */
  --ink-broken-tablet: #4f7bff;
  --ink-sketch-telephone: #ffc53d;
  --ink-dtiys: #b08cff;
  --ink-oc-telephone: #33c7e0;
  --ink-design-battle: #ff8a3d;
  --ink-default: #ffc53d;

  /* Installed-app chrome, read by the web app manifest */
  --pwa-theme-color: var(--color-stage);
  --pwa-background-color: var(--color-paper);

  /* Type */
  --font-display: "Archivo Expanded", "Arial Black", Arial, sans-serif;
  --font-ui: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-caption: 0.8125rem;
  --text-label: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --text-h3: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --text-h2: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --text-h1: clamp(2rem, 1.55rem + 1.9vw, 3rem);
  --text-display: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);
  --tracking-label: 0.1em;

  /* Shape: stickers on paper */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-frame: 8px;
  --radius-pill: 999px;
  --outline-width: 2px;
  --shadow-offset: 5px;
  --press-depth: 4px;
  --tilt: 0.8deg;

  /* Motion */
  --dur-quick: 120ms;
  --dur-pop: 260ms;
  --dur-stage: 300ms;
  --dur-reveal: 420ms;
  --dur-celebrate: 1600ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* Surface roles. The short names are the foreground/background pair of the
   current surface, so every rule written with them flips on a stage, and a
   .surface-paper card placed on a stage flips back. */
.surface-stage {
  --ink: var(--color-on-stage);
  --bone: var(--color-stage);
  --raised: var(--color-stage-raised);
  --crimson-text: var(--color-crimson-on-stage);
  --danger: var(--color-danger-on-stage);
  --shadow-ink: #000;
  --panel-border: color-mix(in srgb, var(--color-on-stage) 14%, transparent);
  --panel-shadow: 0 0 0 transparent;
  --rule: color-mix(in srgb, var(--color-on-stage) 16%, transparent);
  --soft: color-mix(in srgb, var(--color-on-stage) 7%, transparent);
  --muted: color-mix(in srgb, var(--color-on-stage) 72%, transparent);
  color: var(--ink);
  color-scheme: dark;
}

/* Paper roles. Also applied to admin and artwork cards that sit on a stage
   (settings, invites, host tools, the drawing sheet, reveal frames), so those
   read as paper laid on the table. */
:root,
.surface-paper,
.surface-stage :is(.invite-panel, .settings-panel, .room-grid, .standin-replacements,
  .dtiys-host-panel, .dtiys-reference-setup, .oc-reference-setup, .submit-widget,
  .reveal-step, .lineage-summary figure, .dtiys-entry, .dtiys-own-entry, .battle-deal, .battle-match, .notice) {
  --ink: var(--color-ink);
  --bone: var(--color-paper);
  --raised: var(--color-paper-raised);
  --crimson: var(--color-crimson);
  --crimson-text: var(--color-crimson);
  --danger: var(--color-danger);
  --shadow-ink: var(--color-ink);
  --panel-border: var(--color-ink);
  --panel-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-ink);
  --rule: color-mix(in srgb, var(--color-ink) 16%, transparent);
  --soft: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --muted: color-mix(in srgb, var(--color-ink) 72%, transparent);
  color: var(--ink);
  color-scheme: light;
}
.surface-stage :is(.invite-panel, .settings-panel, .room-grid, .standin-replacements,
  .dtiys-host-panel, .dtiys-reference-setup, .oc-reference-setup, .submit-widget,
  .reveal-step, .dtiys-entry, .dtiys-own-entry, .battle-deal, .battle-match, .notice) {
  --panel-shadow: var(--shadow-offset) var(--shadow-offset) 0 #000;
}

/* Game identity: any element with data-game exposes --game-ink. */
[data-game] { --game-ink: var(--ink-default); }
[data-game="broken_tablet"] { --game-ink: var(--ink-broken-tablet); }
[data-game="sketch_telephone"] { --game-ink: var(--ink-sketch-telephone); }
[data-game="dtiys"] { --game-ink: var(--ink-dtiys); }
[data-game="oc_telephone"] { --game-ink: var(--ink-oc-telephone); }
[data-game="design_battle"] { --game-ink: var(--ink-design-battle); }