/* ============================================================
   DESIGN TOKENS — ported from the Gusto design system
   (Urbanist / MuseoModerno / JetBrains Mono, cobalt/crimson/forest palette)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;700;900&family=MuseoModerno:wght@400;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Base palette ---- */
  --cobalt:  #27538F;
  --crimson: #E41010;
  --forest:  #25652B;

  /* ---- Semantic (light theme) ---- */
  --acc:            var(--cobalt);
  --acc-hover:      #1E4275;
  --acc-active:     #153461;
  --on-acc:         #FFFFFF;
  --bg:             #FAF7EF;
  --fg:             #1A1814;
  --muted:          #EDE9DE;
  --sub:            #5A5248;
  --rule:           #C8C2B5;
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;

  /* ---- Families ---- */
  --font-display: 'Urbanist', sans-serif;
  --font-ui:      'Urbanist', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-detail:  'MuseoModerno', cursive;

  /* ---- Spacing (8pt system) ---- */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* ---- Shape ---- */
  --bw:      2px;
  --bw-rule: 1px;
  --r:       0px;

  /* ---- Shadows (Material-style two-layer elevation) ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 3px 0px rgba(0,0,0,.20), 0 1px 2px -1px rgba(0,0,0,.12);
  --shadow-2: 0 3px 6px 0px rgba(0,0,0,.22), 0 2px 4px -1px rgba(0,0,0,.14);
  --shadow-3: 0 8px 16px -2px rgba(0,0,0,.24), 0 4px 8px -1px rgba(0,0,0,.16);
  --shadow-trans: box-shadow 240ms cubic-bezier(0.34,1.56,0.64,1), transform 240ms cubic-bezier(0.34,1.56,0.64,1);
  --shadow-lift-1: translateY(-1px);
  --shadow-lift-2: translateY(-2px);

  /* ---- Breakpoints ---- */
  --bp-md: 48rem;
  --bp-lg: 64rem;
}