/* Quadra's design tokens. Generated by scripts/tokens.py from docs/design/tokens.json:
   edit the JSON, then run the script. How to use them: docs/design/README.md. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }

:root {
  --ground: #EFEEEC;
  --surface: #FAFAF9;
  --raised: #FFFFFF;
  --sunk: #E8E7E4;
  --line: #DDDBD7;
  --line-strong: #878580;
  --ink: #141414;
  --ink-2: #5A5955;
  --accent: #141414;
  --on-accent: #FAFAF9;
  --love: #D61F4C;
  --love-ink: #C01A44;
  --on-love: #FFFFFF;
  --love-soft: #FFE7E8;
  --want: #E79B29;
  --want-ink: #855600;
  --on-want: #141414;
  --want-soft: #FFEEDD;
  --meh: #535D68;
  --meh-soft: #E9EAEC;
  --nope: #8F8880;
  --nope-soft: #EFEEEC;
  --danger: #B42318;
  --danger-soft: #FCEAE6;
  --focus: #2F6FEB;
  --on-poster: #FFFFFF;
  --poster-shade: rgba(0, 0, 0, 0.72);
  --poster-chip: rgba(0, 0, 0, 0.42);
  --poster-edge: rgba(255, 255, 255, 0.12);
  --scrim: rgba(12, 12, 14, 0.5);
  --screen: #000000;
  --map-land: #AAA59D;
  --map-sea: #E8E7E4;
  --map-on-poster: rgba(255, 255, 255, 0.55);
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.08);
  --shadow-card: 0 18px 48px -12px rgba(20, 20, 20, 0.30);
  --shadow-sheet: 0 -8px 32px rgba(20, 20, 20, 0.16);
  --room: var(--room-light);
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-k: 1;
  --t-poster: calc(2.5rem * var(--text-k));
  --t-display: calc(3.25rem * var(--text-k));
  --t-title-1: calc(1.875rem * var(--text-k));
  --t-title-2: calc(1.5rem * var(--text-k));
  --t-title-3: calc(1.25rem * var(--text-k));
  --t-body: calc(1.0625rem * var(--text-k));
  --t-body-strong: calc(1.0625rem * var(--text-k));
  --t-small: calc(0.875rem * var(--text-k));
  --t-small-strong: calc(0.875rem * var(--text-k));
  --t-label: calc(0.75rem * var(--text-k));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-round: 999px;
  --dur-press: 120ms;
  --dur-ui: 240ms;
  --dur-card: 440ms;
  --dur-room: 600ms;
  --ease-ui: cubic-bezier(0.16, 1, 0.3, 1);
  --tilt: 5deg;
  --room-light: 0.30;
  --room-dark: 0.42;
  --disabled: 0.45;
  --hit: 44px;
  --hit-answer: 56px;
  --card-max: 440px;
  --read-max: 38rem;
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0B0C;
    --surface: #141416;
    --raised: #1D1D20;
    --sunk: #0F0F11;
    --line: #2A2A2E;
    --line-strong: #73716C;
    --ink: #EDEBE8;
    --ink-2: #9D9A95;
    --accent: #EDEBE8;
    --on-accent: #141416;
    --love: #FF5B7C;
    --love-ink: #FF7590;
    --on-love: #141416;
    --love-soft: #462B31;
    --want: #FFB23E;
    --want-ink: #FFC266;
    --on-want: #141416;
    --want-soft: #463728;
    --meh: #ADB7C4;
    --meh-soft: #313237;
    --nope: #756E67;
    --nope-soft: #2D2C2D;
    --danger: #FF9B8F;
    --danger-soft: #3D2F30;
    --focus: #7AA7FF;
    --scrim: rgba(0, 0, 0, 0.64);
    --map-land: #4A4844;
    --map-sea: #1D1D20;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 24px 60px -8px rgba(0, 0, 0, 0.6);
    --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
    --room: var(--room-dark);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0B0B0C;
  --surface: #141416;
  --raised: #1D1D20;
  --sunk: #0F0F11;
  --line: #2A2A2E;
  --line-strong: #73716C;
  --ink: #EDEBE8;
  --ink-2: #9D9A95;
  --accent: #EDEBE8;
  --on-accent: #141416;
  --love: #FF5B7C;
  --love-ink: #FF7590;
  --on-love: #141416;
  --love-soft: #462B31;
  --want: #FFB23E;
  --want-ink: #FFC266;
  --on-want: #141416;
  --want-soft: #463728;
  --meh: #ADB7C4;
  --meh-soft: #313237;
  --nope: #756E67;
  --nope-soft: #2D2C2D;
  --danger: #FF9B8F;
  --danger-soft: #3D2F30;
  --focus: #7AA7FF;
  --scrim: rgba(0, 0, 0, 0.64);
  --map-land: #4A4844;
  --map-sea: #1D1D20;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 24px 60px -8px rgba(0, 0, 0, 0.6);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
  --room: var(--room-dark);
  color-scheme: dark;
}

/* An iPhone: text follows the system's text size (Dynamic Type), whose default is 17 px. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
  :root { --text-k: calc(16 / 17); }
}

/* Reduce motion: cards fade instead of flying, nothing tilts, the room stops crossing. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-card: 160ms; --dur-room: 0ms; --tilt: 0deg; }
}

/* The type styles, one class each. */
.t-poster { font-family: var(--font-sans); font-size: var(--t-poster); line-height: 0.95; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.t-display { font-family: var(--font-sans); font-size: var(--t-display); line-height: 1; font-weight: 800; font-stretch: 75%; }
.t-title-1 { font-family: var(--font-sans); font-size: var(--t-title-1); line-height: 1.05; font-weight: 750; font-stretch: 85%; }
.t-title-2 { font-family: var(--font-sans); font-size: var(--t-title-2); line-height: 1.1; font-weight: 700; font-stretch: 85%; }
.t-title-3 { font-family: var(--font-sans); font-size: var(--t-title-3); line-height: 1.2; font-weight: 650; }
.t-body { font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.5; font-weight: 400; }
.t-body-strong { font-family: var(--font-sans); font-size: var(--t-body-strong); line-height: 1.5; font-weight: 600; }
.t-small { font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.45; font-weight: 400; }
.t-small-strong { font-family: var(--font-sans); font-size: var(--t-small-strong); line-height: 1.45; font-weight: 600; }
.t-label { font-family: var(--font-sans); font-size: var(--t-label); line-height: 1.3; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }