/* tokens.css — the Sunbear design system. Every colour, size and duration the
   app uses is named here; nothing below :root writes a raw colour.

   The palette is read off the logo: the cream paper behind the bear
   (#FEF5E7), honey fur (#FDB84C), the cream muzzle (#FDDEA9), blush cheeks
   (#FC966D), the cocoa outline and wordmark (#341C0D), and a mid cocoa
   (#6B4423) for bark-coloured things. Teal (#4494A8) is the one colour not in
   the logo: the calm second colour for focus rings and brand surfaces. Text
   sits on paper in cocoa; honey is the one colour for "press this".            */

@font-face { font-family: 'Fredoka'; src: url('/vendor/fonts/Fredoka.woff2') format('woff2'); font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/vendor/fonts/Nunito.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/vendor/fonts/Nunito-Italic.woff2') format('woff2'); font-weight: 200 1000; font-style: italic; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('/vendor/fonts/Literata.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('/vendor/fonts/Literata-Italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/vendor/fonts/AtkinsonHyperlegibleNext.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/vendor/fonts/AtkinsonHyperlegibleNext-Italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/vendor/fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/vendor/fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/vendor/fonts/OpenDyslexic-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/vendor/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* brand, straight off the logo */
  --sb-paper: #FEF5E7;     /* the cream behind the bear */
  --sb-cream: #FDDEA9;     /* the muzzle */
  --sb-honey: #FDB84C;     /* the fur; the one colour for "press this" */
  --sb-orange: var(--sb-honey); /* the name every sheet already uses */
  --sb-blush: #FC966D;     /* the cheeks */
  --sb-sun: #F2A42B;       /* a deeper gold: warnings, sun glows */
  --sb-bark: #6B4423;      /* mid cocoa */
  --sb-ink: #341C0D;       /* the outline and the wordmark */
  --sb-teal: #4494A8;      /* the calm second colour (not in the logo) */

  /* derived tones */
  --sb-paper-hi: #FFFBF3;
  --sb-paper-lo: #F6E6CB;
  --sb-teal-deep: #2B6F83;
  --sb-teal-ink: #0F3A46;
  --sb-teal-soft: #D6EAEF;
  --sb-orange-deep: #E09A1A;
  --sb-orange-soft: #FEEBC5;
  --sb-blush-soft: #FEE4D9;
  --sb-sun-soft: #FDE7BE;
  --sb-bark-soft: #EFDFCB;
  --sb-red: #B4412C;
  --sb-red-soft: #F7DAD2;
  --sb-green: #3F7D4A;
  --sb-green-soft: #D8EBD6;

  /* roles — light (default) */
  color-scheme: light;
  --bg: var(--sb-paper);
  --bg-sunk: var(--sb-paper-lo);
  --surface: var(--sb-paper-hi);
  --surface-2: #FFFCF6;
  --raise: #FFFFFF;
  --text: var(--sb-ink);
  --text-2: #5A3F2B;
  --text-3: #86715D;
  --line: rgba(52, 28, 13, .14);
  --line-2: rgba(52, 28, 13, .24);
  --outline: var(--sb-ink);
  --accent: var(--sb-orange);
  --accent-hi: #FFC866;
  --accent-deep: var(--sb-orange-deep);
  --accent-soft: var(--sb-orange-soft);
  --on-accent: var(--sb-ink);
  --brand: var(--sb-teal);
  --brand-deep: var(--sb-teal-deep);
  --brand-soft: var(--sb-teal-soft);
  --on-brand: var(--sb-ink);
  --blush: var(--sb-blush);
  --blush-soft: var(--sb-blush-soft);
  --sun: var(--sb-sun);
  --sun-soft: var(--sb-sun-soft);
  --bark: var(--sb-bark);
  --bark-soft: var(--sb-bark-soft);
  --danger: var(--sb-red);
  --danger-soft: var(--sb-red-soft);
  --ok: var(--sb-green);
  --ok-soft: var(--sb-green-soft);
  --focus: var(--sb-teal-deep);
  --scrim: rgba(52, 28, 13, .42);
  --progress-track: rgba(52, 28, 13, .12);

  /* type */
  --font-brand: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-sans: 'Atkinson Hyperlegible Next', 'Nunito', system-ui, sans-serif;
  --font-dyslexic: 'OpenDyslexic', 'Atkinson Hyperlegible Next', sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.9rem;
  --fs-3xl: 2.6rem;

  /* shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --cover-r: 6px;
  --stroke: 2px;          /* the logo's ink outline, scaled to UI */

  /* depth */
  --shadow-1: 0 1px 2px rgba(52, 28, 13, .07), 0 2px 10px rgba(52, 28, 13, .06);
  --shadow-2: 0 10px 30px rgba(52, 28, 13, .16), 0 2px 6px rgba(52, 28, 13, .08);
  --shadow-3: 0 24px 60px rgba(52, 28, 13, .26);
  --shadow-cover: 0 1px 1px rgba(52, 28, 13, .12), 0 6px 16px rgba(52, 28, 13, .18);
  --press-depth: 3px;     /* the hard shadow under primary buttons */

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --tap: 44px;            /* smallest thing a finger has to hit */
  --gutter: clamp(16px, 4vw, 40px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* motion — the CSS side; motion.js holds the GSAP side */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 420ms;

  --z-bar: 20;
  --z-player: 30;
  --z-sheet: 50;
  --z-toast: 70;
  --z-top: 90;
}

/* Night: a deep blue-black (teal taken all the way down), cream text, honey
   kept for the one thing to press, blush a shade warmer so it still reads. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E2128;
  --bg-sunk: #0A181D;
  --surface: #14303A;
  --surface-2: #183844;
  --raise: #1C3F4B;
  --text: #FBEFDC;
  --text-2: #D5C5AE;
  --text-3: #93A3A6;
  --line: rgba(251, 239, 220, .12);
  --line-2: rgba(251, 239, 220, .22);
  --outline: #050B0D;
  --accent: #F5B14A;
  --accent-hi: #FFC466;
  --accent-deep: #D4921F;
  --accent-soft: rgba(245, 177, 74, .18);
  --on-accent: #341C0D;
  --brand: #5AAFC4;
  --brand-deep: #7CC3D5;
  --brand-soft: rgba(90, 175, 196, .16);
  --on-brand: #0B1E24;
  --blush: #FF9F7A;
  --blush-soft: rgba(255, 159, 122, .18);
  --sun-soft: rgba(242, 164, 43, .16);
  --bark-soft: rgba(107, 68, 35, .34);
  --danger: #E7765F;
  --danger-soft: rgba(231, 118, 95, .16);
  --ok: #7FC08A;
  --ok-soft: rgba(127, 192, 138, .16);
  --focus: #7CC3D5;
  --scrim: rgba(0, 0, 0, .55);
  --progress-track: rgba(251, 239, 220, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .25);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .6);
  --shadow-cover: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .45);
}