/* tokens-base.css — design tokens, loaded by ALL pages (app + public) */
/* Single source of truth for colours, fonts, radii, and spacing.      */
/* Do not add reset rules or component styles here.                    */
:root {
  /* Backgrounds */
  --color-paper:      #F3F5F4;
  --bg-surface:       #E8EDE9;
  --surface:          #E8EDE9;
  --bg-card:          #FFFFFF;

  /* Brand colours */
  --color-forest:     #0F4030;
  --color-forest-dark: #0D3628;
  --color-orange:     #C45E2A;
  --color-orange-hover: #A84D23;
  --color-orange-press: #8F4019;
  --color-orange-tint:  rgba(196, 94, 42, 0.06);
  --color-spotify:    #1DB954;

  /* Text */
  --color-ink:        #131A16;
  --color-muted:      #6A7B72;
  --ink-muted:        #9AADA4;
  --color-orange-text: #FFFFFF;

  /* Borders */
  --color-border:     #D4DCD6;
  --line-strong:      #B8C4BC;

  /* Semantic */
  --success:          #38A169;
  --warning:          #D69E2E;
  --error:            #E53E3E;
  --color-error:      #E53E3E;
  --info:             #4299E1;

  /* Typography */
  --font-display: 'Crimson Pro', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Radii */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-pill:  20px;

  /* Layout */
  --wrap-width:   1440px;
  --nav-height:   60px;

  /* Misc */
  --transition:   all 150ms ease;
}