/* =====================================================================
   tokens.css  —  Salty Smiles design tokens
   The single source of truth for color, type, spacing and radius.
   Edit a value here and it cascades to every page.
   ===================================================================== */
:root {
  /* --- Brand palette --- */
  --color-bg:        #F6B847;   /* page background (brand yellow)      */
  --color-ink:       #3A2A1C;   /* primary text (espresso brown)       */
  --color-ink-2:     #54402d;   /* secondary / muted text              */
  --color-cream:     #FFF6DD;   /* pale tint for panels & receipts     */
  --color-red:       #E0312E;   /* alerts and "needs your input" flags */
  --color-green:     #2F8F57;   /* success / savings                   */
  --color-yellow-d:  #E0A12B;   /* deeper yellow accent                */

  /* --- Surfaces (the "no white boxes" translucent look) --- */
  --panel-fill:  rgba(255, 246, 221, 0.55);
  --tint:        rgba(58, 42, 28, 0.07);
  --hairline:    rgba(58, 42, 28, 0.15);

  /* --- Typography --- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, Menlo, Consolas, monospace;

  /* --- Spacing scale --- */
  --space-1: 6px;  --space-2: 10px; --space-3: 14px; --space-4: 20px;
  --space-5: 28px; --space-6: 40px; --space-7: 64px;

  /* --- Radii --- */
  --radius-sm:   12px;
  --radius:      18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --maxw: 1200px;
  --header-h: 60px;
}