/*
  POQUAIR — Card Stock
  Light: cream card stock and printed card faces.
  Dark: the card back — deep navy ground, navy faces, cream ink.
  The per-user accent is injected by applyThemePreference() as --accent*.
*/

:root {
  color-scheme: light;

  /* Ground and faces */
  --ground: #f7f3ea;
  --ground-deep: #efe9dc;
  --face: #fffdf8;
  --face-2: #f8f4ea;
  --face-3: #f1ebde;
  --scrim: rgba(36, 30, 20, 0.36);

  /* Ink */
  --ink: #16181d;
  --ink-2: #4b4f59;
  --ink-3: #6c6f78;
  --ink-inverse: #fbf8f1;

  /* Rules */
  --rule: #e4dbca;
  --rule-strong: #cbbda3;
  --rule-control: #bfb19a;

  /* The card back */
  --navy: #1e3a5f;
  --navy-2: #284b78;
  --navy-ink: #f5f0e4;
  --navy-line: rgba(245, 240, 228, 0.16);
  --card-edge: #fbf7ee;
  --card-back: #1e3a5f;

  /* Pip colours and states */
  --red: #b8132c;
  --red-soft: #f7e3e3;
  --red-line: #e7b9bc;
  --green: #1d6f4f;
  --green-soft: #e1efe6;
  --amber: #8a5a00;
  --amber-soft: #f6ead0;
  --amber-line: #e3cc97;

  /* Podium foils: printed metal, identical in both themes; each ink clears 5:1 on its foil */
  --podium-1-a: #f6e2a4;
  --podium-1-b: #d2a64a;
  --podium-1-ink: #3a2804;
  --podium-2-a: #e6ecf2;
  --podium-2-b: #a3b2c3;
  --podium-2-ink: #1b2735;
  --podium-3-a: #efc7a3;
  --podium-3-b: #bf8459;
  --podium-3-ink: #2a1206;

  /* Accent fallbacks (overwritten at runtime) */
  --accent: #1e3a5f;
  --accent-strong: #172e4c;
  --accent-ink: #ffffff;
  --accent-soft: #e6ebf1;
  --accent-line: #b9c6d6;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-md: 0.9375rem;  /* 15 */
  --text-lg: 1.0625rem;  /* 17 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.875rem;  /* 30 */
  --text-4xl: 2.375rem;  /* 38 */

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Corners: a card's corners, one family */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-card: 22px;
  --r-pill: 999px;

  /* Depth: only for cards lifted off the table */
  --lift-1: 0 1px 1px rgba(40, 32, 18, 0.05), 0 2px 6px -2px rgba(40, 32, 18, 0.08);
  --lift-2: 0 1px 2px rgba(40, 32, 18, 0.06), 0 14px 32px -14px rgba(40, 32, 18, 0.24);
  --lift-3: 0 2px 4px rgba(40, 32, 18, 0.06), 0 30px 60px -24px rgba(40, 32, 18, 0.34);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-deal: 320ms;

  /* Layout */
  --topbar-h: 76px;
  --page-gutter: 32px;
  --focus-ring: 0 0 0 2px var(--face), 0 0 0 4px var(--accent);

  /* Large-screen scale: the layout is composed for a ~1700 × 900 room screen and the whole UI
     scales up past it, the way browser zoom would. Viewport units are divided back by the zoom. */
  --ui-zoom: 1;
  --vw: calc(1vw / var(--ui-zoom));
  --vh: calc(1vh / var(--ui-zoom));
  --dvh: calc(1dvh / var(--ui-zoom));
}

html {
  zoom: var(--ui-zoom);
}

@media (min-width: 1900px) and (min-height: 1000px) {
  :root { --ui-zoom: 1.12; }
}

@media (min-width: 2200px) and (min-height: 1150px) {
  :root { --ui-zoom: 1.3; }
}

@media (min-width: 2500px) and (min-height: 1250px) {
  :root { --ui-zoom: 1.45; }
}

@media (min-width: 2800px) and (min-height: 1400px) {
  :root { --ui-zoom: 1.65; }
}

@media (min-width: 3300px) and (min-height: 1650px) {
  :root { --ui-zoom: 1.9; }
}

@media (min-width: 3700px) and (min-height: 1900px) {
  :root { --ui-zoom: 2.1; }
}

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

  /* The card back: deep printed navy, cream ink */
  --ground: #0e1d33;
  --ground-deep: #0a1628;
  --face: #142745;
  --face-2: #182d4f;
  --face-3: #1d3458;
  --scrim: rgba(4, 10, 22, 0.66);

  --ink: #f4eee2;
  --ink-2: #c3c8d2;
  --ink-3: #95a0b4;
  --ink-inverse: #0e1d33;

  --rule: #223a60;
  --rule-strong: #2f4a75;
  --rule-control: #3d5885;

  --navy: #1e3a5f;
  --navy-2: #284b78;
  --navy-ink: #f4eee2;
  --navy-line: rgba(244, 238, 226, 0.2);
  --card-edge: #e9e1cf;
  --card-back: #233f68;

  --red: #f0424c;
  --red-soft: #3d1a2a;
  --red-line: #7a2a3a;
  --green: #7fd1aa;
  --green-soft: #163a35;
  --amber: #f0c26b;
  --amber-soft: #36301a;
  --amber-line: #5e4d22;

  --accent: #a9c7e3;
  --accent-strong: #cddff0;
  --accent-ink: #0e1d33;
  --accent-soft: #203d63;
  --accent-line: #3b5c88;

  --lift-1: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
  --lift-2: 0 1px 2px rgba(0, 0, 0, 0.25), 0 16px 36px -14px rgba(0, 0, 0, 0.55);
  --lift-3: 0 2px 4px rgba(0, 0, 0, 0.3), 0 32px 64px -24px rgba(0, 0, 0, 0.7);
}

@media (max-width: 760px) {
  :root {
    --topbar-h: 60px;
    --page-gutter: 16px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root {
    --page-gutter: 24px;
  }
}