/* Design tokens. Every colour, size and timing in the app resolves to one of these. */

:root {
  color-scheme: dark;

  /* backgrounds / surfaces */
  --bg-void: #05070d;
  --bg-base: #0a0e17;
  --bg-sunken: #070a11;
  --surface-1: #111725;
  --surface-2: #182032;
  --surface-3: #1f2a40;
  --surface-glass: rgba(17, 23, 37, .82);
  --scrim: rgba(3, 5, 10, .74);

  /* lines */
  --border-subtle: #1b2438;
  --border: #27324a;
  --border-strong: #3a4767;
  --hairline: inset 0 1px 0 rgba(255, 255, 255, .055);
  --grid-line: rgba(122, 150, 200, .075);

  /* text */
  --text-hi: #e9eefb;
  --text: #b6c2d8;
  --text-dim: #7b88a3;
  --text-faint: #56617b;

  /* accents */
  --accent: #22d3ee;
  --accent-hi: #67e8f9;
  --accent-ink: #04222a;
  --accent-soft: rgba(34, 211, 238, .12);
  --accent-2: #a78bfa;
  --accent-2-soft: rgba(167, 139, 250, .13);
  --accent-3: #f2b544;
  --accent-3-soft: rgba(242, 181, 68, .13);

  /* semantic */
  --ok: #34d399;      --ok-soft: rgba(52, 211, 153, .13);
  --warn: #fbbf24;    --warn-soft: rgba(251, 191, 36, .13);
  --danger: #f4506a;  --danger-soft: rgba(244, 80, 106, .13);
  --info: #60a5fa;    --info-soft: rgba(96, 165, 250, .13);

  /* rarity */
  --r-common: #97a3b8;
  --r-uncommon: #4ade80;
  --r-rare: #38bdf8;
  --r-epic: #c084fc;
  --r-legendary: #fbbf24;
  --r-mythic: #fb7185;

  /* stat tiers */
  --tier-1: #6b7891;
  --tier-2: #4ade80;
  --tier-3: #38bdf8;
  --tier-4: #a78bfa;
  --tier-5: #fbbf24;
  --tier-6: #fb7185;

  /* board */
  --sq-light: #c7d2e4;
  --sq-dark: #48597d;
  --sq-last: rgba(242, 181, 68, .38);
  --sq-sel: rgba(34, 211, 238, .36);
  --sq-legal: rgba(34, 211, 238, .6);
  --sq-check: rgba(244, 80, 106, .65);
  --piece-w-fill: #f3f7ff;
  --piece-w-stroke: #16203a;
  --piece-b-fill: #1a2338;
  --piece-b-stroke: #9db0d0;
  --board-frame: #0d1320;

  /* typography */
  --font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Segoe UI Variable Display", Bahnschrift, "Segoe UI Semibold",
             "Avenir Next Condensed", "Roboto Condensed", "DejaVu Sans Condensed", var(--font-ui);
  --font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", SFMono-Regular, "SF Mono",
             Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.375rem;
  --fs-3xl: 1.75rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;

  --ls-caps: .09em;
  --ls-caps-wide: .15em;

  /* spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px;

  /* radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-2: 0 4px 14px -3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
  --sh-3: 0 14px 38px -10px rgba(0, 0, 0, .68), 0 2px 6px rgba(0, 0, 0, .4);
  --sh-4: 0 28px 72px -18px rgba(0, 0, 0, .78);
  --glow-accent: 0 0 0 1px rgba(34, 211, 238, .34), 0 0 22px -4px rgba(34, 211, 238, .42);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  /* motion */
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 260ms;
  --dur-4: 420ms;
  --dur-5: 700ms;
  --dur-move: 220ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.64, 0, .78, 0);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* z-index */
  --z-sticky: 100; --z-dropdown: 300; --z-modal: 500; --z-toast: 600; --z-celebration: 800;

  /* layout */
  --topbar-h: 58px;
  --sidebar-w: 236px;
  --content-max: 1280px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-void: #e7ebf3;
  --bg-base: #f0f3f9;
  --bg-sunken: #e4e9f3;
  --surface-1: #ffffff;
  --surface-2: #f6f8fd;
  --surface-3: #edf1fa;
  --surface-glass: rgba(255, 255, 255, .86);
  --scrim: rgba(16, 22, 36, .44);

  --border-subtle: #e3e8f2;
  --border: #d2dae8;
  --border-strong: #b3c0d6;
  --hairline: inset 0 1px 0 rgba(255, 255, 255, .9);
  --grid-line: rgba(40, 70, 120, .05);

  --text-hi: #0c1322;
  --text: #3d4860;
  --text-dim: #66738e;
  --text-faint: #8b97ae;

  --accent: #0e8fa8;
  --accent-hi: #0aa5c2;
  --accent-ink: #ffffff;
  --accent-soft: rgba(14, 143, 168, .10);
  --accent-2: #6d3ff0;
  --accent-2-soft: rgba(109, 63, 240, .10);
  --accent-3: #a9730c;
  --accent-3-soft: rgba(169, 115, 12, .12);

  --ok: #0f9d63;      --ok-soft: rgba(15, 157, 99, .11);
  --warn: #b06f00;    --warn-soft: rgba(176, 111, 0, .11);
  --danger: #d02347;  --danger-soft: rgba(208, 35, 71, .10);
  --info: #1f6fd6;    --info-soft: rgba(31, 111, 214, .10);

  --r-common: #6c7a90;
  --r-uncommon: #17924f;
  --r-rare: #1180c4;
  --r-epic: #8b3fd6;
  --r-legendary: #b07b06;
  --r-mythic: #d02347;

  --tier-1: #7b879c; --tier-2: #17924f; --tier-3: #1180c4;
  --tier-4: #7b45e0; --tier-5: #b07b06; --tier-6: #d02347;

  --sq-light: #eef1f7;
  --sq-dark: #7a8db0;
  --piece-w-fill: #ffffff;
  --piece-w-stroke: #2b3550;
  --piece-b-fill: #2b3550;
  --piece-b-stroke: #ffffff;
  --board-frame: #d8dfec;

  --sh-1: 0 1px 2px rgba(20, 32, 60, .08);
  --sh-2: 0 4px 14px -3px rgba(20, 32, 60, .14), 0 1px 2px rgba(20, 32, 60, .07);
  --sh-3: 0 14px 38px -10px rgba(20, 32, 60, .20), 0 2px 6px rgba(20, 32, 60, .08);
  --sh-4: 0 28px 72px -18px rgba(20, 32, 60, .26);
  --glow-accent: 0 0 0 1px rgba(14, 143, 168, .30), 0 0 16px -6px rgba(14, 143, 168, .35);
}