/*
 * Every color, font, size, and radius in the app resolves to one of these
 * custom properties. A hard-coded value in any other stylesheet is a defect.
 *
 * Light is the primary theme; dark is derived below from the same token
 * names, so no other stylesheet ever mentions a theme. The well tokens are
 * the exception to theming: card images always sit in a dark well, so they
 * keep the same values in both themes.
 */
@layer tokens {
  :root {
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --font-display: "Eczar", "Iowan Old Style", "Palatino Linotype", Palatino,
      Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
      "Liberation Mono", monospace;
    /* Eczar carries more weight per stroke than a text serif, so the browser's
       default bold closes up its counters. Semibold keeps display type clearly
       heavier than the body sans without turning solid. */
    --weight-display: 600;

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --leading-body: 1.6;
    --leading-tight: 1.2;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --measure: 42rem;
    --site-width: 64rem;
    --radius: 0.375rem;
    /* A physical Magic card's rounded corner, as a fraction of the card's
       width / height. Card scans are rectangular with white pixels filling
       the square corners; clipping an image to this radius restores the
       card's own corner geometry, whatever its border color. */
    --card-corner-radius: 4.75% / 3.5%;

    --color-bg: #f6f0e2;
    --color-surface: #fdfaf2;
    --color-ink: #241f15;
    --color-ink-muted: #6d6553;
    --color-border: #d9cead;
    --color-accent: #8a6516;
    --color-accent-ink: #fdfaf2;

    /* The accent is brass: site chrome — links, buttons, nav, sorts. Aether
       is measured energy — the points pill, the budget meter, focus rings.
       The split encodes the difference between site furniture and the stored
       power the format prices. */
    --color-aether: #0b6e7c;
    --color-aether-ink: #fdfaf2;

    /* Danger marks the blocking tier — banned cards, an over-budget total.
       Kept apart from the accent, which is brand brass, not a warning. */
    --color-danger: #b3261e;
    --color-danger-surface: #f9e5e2;

    --color-well: #1b1a18;
    --color-well-ink: #e8e5e0;
    --color-well-ink-muted: #b3aea3;

    /* Mana-color pips. Like the well, these mean the same thing in both
       themes, so they are not redefined in the dark block. */
    --pip-white: #f2ecd0;
    --pip-blue: #2a76b8;
    --pip-black: #2e2a26;
    --pip-red: #c04a35;
    --pip-green: #3f7d4f;
    --pip-colorless: #b8b2a8;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #10181e;
      --color-surface: #182229;
      --color-ink: #e9e4d4;
      --color-ink-muted: #99a29e;
      --color-border: #2d3a42;
      --color-accent: #d9a84e;
      --color-accent-ink: #10181e;
      --color-aether: #4cd7e5;
      --color-aether-ink: #0c2b30;
      --color-danger: #e2695e;
      --color-danger-surface: #3a2022;
    }
  }
}