/* GuitarBajaao · design tokens. Change the brand here and the whole app follows. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage.woff') format('woff'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans.woff') format('woff'); font-weight: 400 700; font-display: swap; }
:root {
  /* colour */
  --bg: #F4F5F1;
  --bg-2: #ECEEE9;
  --card: #FFFFFF;
  --ink: #15181C;
  --ink-2: #4A525A;
  --ink-3: #8A929A;
  --line: #DDE1DC;
  --line-2: #EEF0EC;
  --accent: #C93A08;
  --accent-2: #A52E05;
  --accent-soft: #FBEDE6;
  --accent-soft-2: #F1D3C4;
  --green: #0F5F4E;
  --green-soft: #E4EFEC;
  --amber: #B7791F;
  --amber-soft: #FBF1DC;
  --red: #B3261E;
  --red-soft: #F9E3E1;
  --blue: #2F5D9F;
  --blue-soft: #E5ECF7;

  /* dark surfaces (live class, hero cards) */
  --dk-bg: #0E1013;
  --dk-card: #1F242A;
  --dk-card-2: #262B31;
  --dk-line: #333A42;
  --dk-ink: #F4F5F1;
  --dk-ink-2: #D4DADF;
  --dk-ink-3: #B9C0C7;
  --dk-accent: #F2B8A0;

  /* type */
  --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;

  /* space & shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(21,24,28,.06), 0 1px 1px rgba(21,24,28,.04);
  --shadow-2: 0 6px 20px rgba(21,24,28,.10);
  --shadow-3: 0 18px 50px rgba(21,24,28,.18);

  /* layout */
  --nav-h: 64px;
  --page-max: 1120px;
  --phone-max: 520px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}