/*
 * theme.css — design tokens + dark/light themes.
 *
 * Aesthetic: "lab notebook / search field" — a graph-paper substrate, an
 * editorial Fraunces serif masthead over IBM Plex Mono data, hairline borders,
 * and a single sharp vermilion accent. Everything re-skins via data-theme.
 */
:root {
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-sm: 4px;
  --radius: 7px;
  --radius-lg: 10px;
  --space: 16px;
  --maxw: 1240px;
  --grid: 28px;                 /* graph-paper cell size */
  --transition: 160ms cubic-bezier(.2, .65, .2, 1);
}

/* ---------------------------------------------------------- dark (default) */
:root,
:root[data-theme='dark'] {
  --ink: #0b0d11;
  --bg: #0b0d11;
  --grid-line: rgba(233, 226, 211, .045);
  --bg-grad:
    radial-gradient(900px 540px at 82% -8%, rgba(255, 77, 46, .10), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid) var(--grid),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid) var(--grid),
    var(--ink);

  --surface: #111419;
  --surface-2: #171b21;
  --border: rgba(233, 226, 211, .12);
  --border-strong: rgba(233, 226, 211, .26);

  --text: #ece6da;
  --text-dim: #8a9099;
  --text-faint: #5b626c;

  --accent: #ff4d2e;
  --accent-2: #ff7a4d;
  --accent-soft: rgba(255, 77, 46, .14);

  --primary: #ff4d2e;
  --primary-2: #ff7a4d;

  --x-color: #4d8cff;
  --o-color: #ff5a36;
  --good: #38c892;
  --bad: #ff6a5a;

  --shadow: 0 16px 40px rgba(0, 0, 0, .55);
  --tile-grad: linear-gradient(180deg, #232a33, #171b21);
  --tile-text: #ece6da;
}

/* ---------------------------------------------------------------- light */
:root[data-theme='light'] {
  --ink: #f4f0e7;
  --bg: #f4f0e7;
  --grid-line: rgba(34, 26, 14, .06);
  --bg-grad:
    radial-gradient(900px 540px at 84% -10%, rgba(226, 61, 31, .08), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid) var(--grid),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid) var(--grid),
    var(--ink);

  --surface: #fcfaf4;
  --surface-2: #f0ebdf;
  --border: rgba(34, 26, 14, .16);
  --border-strong: rgba(34, 26, 14, .34);

  --text: #15130d;
  --text-dim: #645f54;
  --text-faint: #918a7c;

  --accent: #e23d1f;
  --accent-2: #ff6a3d;
  --accent-soft: rgba(226, 61, 31, .12);

  --primary: #e23d1f;
  --primary-2: #ff6a3d;

  --x-color: #1f5fe0;
  --o-color: #e23d1f;
  --good: #1f9e74;
  --bad: #c43d47;

  --shadow: 0 16px 36px rgba(70, 55, 30, .14);
  --tile-grad: linear-gradient(180deg, #ffffff, #efe9dc);
  --tile-text: #15130d;
}

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