/*
 * Paper & Ink foundation.
 *
 * Every screen reads colours, type stacks, and surfaces from these tokens.
 * Paper is the default; `data-theme="ink"` on <html> switches to the dark
 * variant. `src/ui/theme.ts` owns that attribute and the initial OS choice.
 */

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-serif-display.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Decorative seal glyphs only: 斗地主 胜 负 春 天. */
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-sc-seals.woff2") format("woff2");
  unicode-range: U+4E3B, U+5730, U+5929, U+6597, U+6625, U+80DC, U+8D1F;
}

:root {
  color-scheme: light;

  /* Paper palette */
  --page: #ebe5d8;
  --bg-solid: #f2ece0;
  --bg-wash: radial-gradient(
    circle at 82% 16%,
    rgba(210, 58, 42, 0.14) 0 16%,
    transparent 16.3%
  );
  --bg: var(--bg-wash), var(--bg-solid);
  --pattern: radial-gradient(rgba(60, 40, 10, 0.05) 1px, transparent 1.2px) 0 0 /
    5px 5px;

  --text: #1b1a17;
  --muted: #6f685c;
  --line: rgba(27, 26, 23, 0.16);
  --accent: #b43225;
  --accent-fill: #d23a2a;
  --panel: rgba(255, 255, 255, 0.6);

  --p-bg: #1b1a17;
  --p-ink: #f2ece0;

  --card: #fffdf8;
  --card-ink: #1b1a17;
  --card-red: #b43225;
  --card-bd: rgba(27, 26, 23, 0.2);

  --av1: #b43225;
  --av2: #3a6ea5;
  --av3: #1b1a17;
  --av3-ink: #fffdf8;

  --scrim: rgba(242, 236, 224, 0.74);
  --modal: #fbf8f1;

  /* Type */
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --font-seal: "Noto Serif SC", "Songti SC", serif;

  /* Surfaces and motion */
  --radius-panel: 8px;
  --radius-control: 7px;
  --shadow-paper: 0 1px 0 rgba(27, 26, 23, 0.05),
    0 10px 26px rgba(27, 26, 23, 0.1);
  --ease-out: cubic-bezier(0.2, 0.75, 0.3, 1);

  /* Safe areas for notches and home indicators. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

:root[data-theme="ink"] {
  color-scheme: dark;

  --page: #0f0e0c;
  --bg-solid: #17150f;
  --bg-wash: radial-gradient(
    circle at 82% 16%,
    rgba(229, 83, 63, 0.17) 0 16%,
    transparent 16.3%
  );
  --pattern: radial-gradient(
      rgba(255, 240, 210, 0.035) 1px,
      transparent 1.2px
    )
    0 0 / 5px 5px;

  --text: #ece5d6;
  --muted: #8f877a;
  --line: rgba(236, 229, 214, 0.16);
  --accent: #e5533f;
  /* Darker than the accent text so white labels on fills keep 4.5:1. */
  --accent-fill: #d23a2a;
  --panel: rgba(255, 255, 255, 0.045);

  --p-bg: #ece5d6;
  --p-ink: #17150f;

  --card: #f4efe4;
  --card-ink: #17150f;
  --card-red: #b43225;
  --card-bd: rgba(0, 0, 0, 0.5);

  --av1: #d23a2a;
  --av2: #4673a8;
  --av3: #ece5d6;
  --av3-ink: #17150f;

  --scrim: rgba(10, 9, 7, 0.72);
  --modal: #201d17;

  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 34px rgba(0, 0, 0, 0.4);
}

html,
body {
  background: var(--page);
  color: var(--text);
}

body {
  font-family: var(--font-ui);
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: #fffdf8;
}

/* ------------------------------------------------------------------ stamps */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.32em 0.68em 0.28em;
  border: 0.13em solid currentColor;
  border-radius: 0.22em;
  background: color-mix(in srgb, var(--bg-solid) 72%, transparent);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-6deg);
}

.stamp--r {
  transform: rotate(5deg);
}

.stamp--flat {
  transform: none;
}

.stamp--ink {
  color: var(--text);
}

.stamp--fill {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: #fffdf8;
}

.stamp--fill.stamp--ink {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg-solid);
}

.stamp__seal {
  font-family: var(--font-seal);
  font-weight: 900;
  letter-spacing: 0;
}