/* ─────────────────────────────────────────────────────────────────────────────
   variables.css — Design Tokens & Global Reset
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --brand:        #2D6A4F;
  --brand-light:  #52B788;
  --brand-dark:   #1B4332;
  --brand-surf:   #D8F3DC;

  /* Surfaces */
  --scaffold:     #F8FAF9;
  --surface:      #FFFFFF;

  /* Borders */
  --border:       #E4EBE6;
  --border-act:   #52B788;

  /* Text */
  --text-dark:    #1A2E22;
  --text-mid:     #5A7060;
  --text-light:   #AABDAF;

  /* Status */
  --error:        #E63946;
  --success:      #40916C;

  /* Palette extras */
  --ocean:        #1D3461;
  --ocean-acc:    #247BA0;
  --midnight:     #0F1923;
  --midnight-acc: #4ECDC4;
  --royal:        #6A0572;
  --royal-acc:    #FFD700;
  --copper:       #3D2B1F;
  --copper-acc:   #B87333;

  /* Typography */
  --font: 'Figtree', sans-serif;
  --mono: 'DM Mono', monospace;

  /* Radii */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
}

/* ── Reset ────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font);
  background: var(--scaffold);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}