/* Roaming Burritos: fonts and design tokens.
   Shared by the app (app.css) and the public landing page (landing.css),
   so a colour only ever changes in one place. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/vendor/fonts/bricolage-grotesque-latin-wght.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: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/vendor/fonts/bricolage-grotesque-latin-ext-wght.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;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #FBF6EE;
  --surface: #FFFFFF;
  --surface-2: #F5EEE3;
  --surface-3: #EDE3D4;
  --text: #221C15;
  --text-2: #6A5F52;
  --text-3: #796F64;
  --border: rgb(34 28 21 / 0.10);
  --border-strong: rgb(34 28 21 / 0.22);
  --accent: #E4572E;
  --accent-strong: #C8431D;
  --accent-soft: #FCE6DC;
  --avocado: #4E9F3D;
  /* Filled buttons: bright green with dark text (white on this green is hard to read). */
  --button: #22C55E;
  --button-hover: #16A34A;
  --button-text: #052E16;
  --focus: #2F6FDE;
  --glass: rgb(255 255 255 / 0.82);
  --glass-border: rgb(255 255 255 / 0.7);
  --shadow-1: 0 1px 2px rgb(34 28 21 / 0.08), 0 4px 14px rgb(34 28 21 / 0.10);
  --shadow-2: 0 12px 40px rgb(34 28 21 / 0.22);
  --scrim: rgb(20 16 12 / 0.45);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --edge: 16px;
  --ctl: 48px;
  --chip-h: 38px;
  --top-y: calc(var(--sat) + 12px);
  --chips-y: calc(var(--top-y) + var(--ctl) + 10px);
  --panel-top: calc(var(--chips-y) + var(--chip-h) + 12px);
  --panel-w: 400px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0B1517;
  --surface: #112126;
  --surface-2: #182C32;
  --surface-3: #21383F;
  --text: #E9F1F1;
  --text-2: #A6BCBF;
  --text-3: #7C9397;
  --border: rgb(233 241 241 / 0.10);
  --border-strong: rgb(233 241 241 / 0.24);
  --accent: #F7683B;
  --accent-strong: #FF8A63;
  --accent-soft: #3A2620;
  --focus: #7FA8FF;
  --glass: rgb(17 33 38 / 0.80);
  --glass-border: rgb(255 255 255 / 0.08);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
  --shadow-2: 0 12px 40px rgb(0 0 0 / 0.6);
  --scrim: rgb(0 0 0 / 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0B1517;
    --surface: #112126;
    --surface-2: #182C32;
    --surface-3: #21383F;
    --text: #E9F1F1;
    --text-2: #A6BCBF;
    --text-3: #7C9397;
    --border: rgb(233 241 241 / 0.10);
    --border-strong: rgb(233 241 241 / 0.24);
    --accent: #F7683B;
    --accent-strong: #FF8A63;
    --accent-soft: #3A2620;
    --focus: #7FA8FF;
    --glass: rgb(17 33 38 / 0.80);
    --glass-border: rgb(255 255 255 / 0.08);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
    --shadow-2: 0 12px 40px rgb(0 0 0 / 0.6);
    --scrim: rgb(0 0 0 / 0.55);
  }
}