/* askbiff design tokens. Link this before any other stylesheet. Rules for using them: design.md */

/* Fonts are self-hosted (SIL Open Font License, see fonts/LICENSE.txt) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  color-scheme: light;

  /* Palette */
  --tile: #F7FBFB;
  --grout: #DCE8EA;
  --water: #0E8C99;
  --deep: #0A5560;
  --deeper: #073F47;
  --duck: #FFC61A;
  --duck-soft: #FFE9A8;
  --beak: #FF7A1A;
  --ink: #0B2B33;
  --ink-2: #36545B;
  --white: #FFFFFF;
  --error: #B3261E;
  --error-soft: #FCE8E6;
  --success: #1E7A4C;
  --success-soft: #E2F3EA;
  --code-text: #D5ECEE;
  --code-muted: #8FC2C8;
  --code-key: #FFD45C;
  --code-add: #FFE29A;

  /* Roles: use these in components. The deep theme below flips them. */
  --bg: var(--tile);
  --grid-line: var(--grout);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --focus-color: var(--deep);
  --shadow-color: var(--ink);

  /* Type */
  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-xs: .8rem;
  --text-s: .88rem;
  --text-m: .95rem;
  --text-base: 1rem;
  --text-body: 1.125rem;
  --text-l: 1.3rem;
  --text-xl: 1.6rem;
  --text-2xl: 1.9rem;
  --text-lede: clamp(1.15rem, 1rem + .45vw, 1.35rem);
  --text-bubble: clamp(1.4rem, 1.1rem + .9vw, 1.85rem);
  --text-verdict: clamp(1.8rem, 1.2rem + 1.7vw, 2.6rem);
  --text-answer: clamp(2rem, 1.5rem + 1.5vw, 2.9rem);
  --text-h2: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --text-h1: clamp(3.4rem, 1.5rem + 6.2vw, 7.25rem);
  --text-num: 7rem;
  --text-price: 7.5rem;

  /* Space: multiples of 4px. --space-N is N × 4px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-section: clamp(80px, 10vw, 128px);

  /* Shape */
  --line-w: 2.5px;
  --line: var(--line-w) solid var(--ink);
  --radius-xs: 6px;
  --radius-s: 12px;
  --radius-m: 14px;
  --radius-l: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;

  /* Layout */
  --wrap: 1152px;
  --gut: clamp(16px, 4vw, 32px);
  --nav-h: 68px;
  --tile-size: 64px;
  --tap: 44px;

  /* Motion */
  --dur-press: .12s;
  --dur-fade: .18s;
  --dur-bob: 3.4s;
  --dur-drift: 6s;
}

/* Deep theme: the dark teal sections, and dark mode for any page with data-theme="dark" on <html> */
.deep, [data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--deep);
  --grid-line: rgba(255, 255, 255, .05);
  --text: #E6F4F5;
  --text-2: #BFE0E3;
  --focus-color: var(--duck);
  --shadow-color: #052F35;
}

/* Solid shadows. Declared here so they pick up each theme's --shadow-color. */
:root, .deep, [data-theme="dark"] {
  --shadow-press: 0 1px 0 var(--shadow-color);
  --shadow-s: 0 3px 0 var(--shadow-color);
  --shadow-m: 0 5px 0 var(--shadow-color);
  --shadow-l: 0 6px 0 var(--shadow-color);
  --shadow-xl: 0 8px 0 var(--shadow-color);
  --shadow-2xl: 0 10px 0 var(--shadow-color);
}