/* tokens.css — Canonical design tokens for the Vine editorial light system.
   SINGLE SOURCE OF TRUTH for all colour, spacing, radius, and type tokens.
   Component CSS reads exclusively from these variables — never hardcode hex.
   DESIGN.md § 2. */

:root {
  /* ── Colour ──────────────────────────────────────────────────────────────── */
  --canvas:          #F6F5F1; /* Warm off-white page background                */
  --surface:         #FFFFFF; /* Card surface                                  */
  --surface-2:       #FBFAF6; /* Card hover / inset form fields                */
  --hairline:        #EAE7DE; /* Faint dividers                                */
  --hairline-strong: #DCD8CC; /* Prominent dividers + outlined buttons         */
  --ink:             #16181D; /* Primary text + dark focal-card background     */
  --ink-2:           #3A3F47; /* Secondary text                                */
  --mute:            #7C828B; /* Muted / metadata                              */
  --mute-2:          #ABAFB6; /* Placeholders / inactive                       */

  /* Brand */
  --accent:          #3FB66B; /* Primary green — CTAs, eyebrows, success state */
  --accent-ink:      #1F7A47; /* Dark green for delta text on light bg         */
  --accent-bg:       #EBF6EE; /* Light green tint — milestone cards            */

  /* Semantic */
  --warn-fg:         #B97C1D; /* Amber — warnings + "recommended" tick         */
  --warn-bg:         #FBF1DF; /* Amber tint                                    */
  --danger-fg:       #C84A3B; /* Coral red — errors, danger warnings           */
  --danger-bg:       #FAEDE9; /* Red tint                                      */
  --info-fg:         #3E5E89; /* Slate blue — info, multi-series chart #1      */
  --info-bg:         #EBF0F6; /* Blue tint                                     */

  /* Earth-tone power zone palette (Activity zone strip) */
  --z1: #C8B89A; /* Recovery  */
  --z2: #A8C4A0; /* Aerobic   */
  --z3: #F0C070; /* Tempo     */
  --z4: #E8915A; /* Threshold */
  --z5: #C85A3A; /* VO2 max   */

  /* ── Spacing (4-pt grid) ─────────────────────────────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  --r-s:  8px;  /* Chips, small buttons         */
  --r-m: 12px;  /* Form-side cards, tooltip     */
  --r:   14px;  /* Standard cards               */
  --r-l: 18px;  /* Focal session card           */

  /* ── Touch target ────────────────────────────────────────────────────────── */
  --tap: 44px;
}