/* ── tokens.css ──────────────────────────────────────────────────────────────
   Single source of truth for all design decisions.
   Token names follow Cedar DS conventions; values are DayLog-specific.
   Link this before styles.css in index.html.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────
   Spacing
───────────────────────────────────────── */
:root {
  --space-1:   4px;   /* chip gap, icon padding          */
  --space-2:   8px;   /* label margin, row gap           */
  --space-3:  12px;   /* card gap, chip horizontal pad   */
  --space-4:  16px;   /* base content padding, btn pad   */
  --space-5:  20px;   /* header padding, form group      */
  --space-6:  24px;   /* section margin, major padding   */
  --space-12: 48px;   /* empty state padding             */
}

/* ─────────────────────────────────────────
   Radius
───────────────────────────────────────── */
:root {
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;
}

/* ─────────────────────────────────────────
   Colour — dark mode (default)
───────────────────────────────────────── */
:root {
  /* Surfaces */
  --color-surface-base:    #0f172a;
  --color-surface-default: #1e293b;
  --color-surface-raised:  #334155;

  /* Borders */
  --color-border-default:  #334155;

  /* Text */
  --color-text-primary:    #f1f5f9;
  --color-text-secondary:  #94a3b8;
  --color-text-on-brand:   #ffffff;

  /* Brand (workout / primary action) */
  --color-brand-primary:   #6366f1;

  /* Supplement accent */
  --color-supplement:      #0d9488;

  /* Feedback */
  --color-error:           #f87171;
  --color-success:         #4fba73;  /* Cedar success/400 — legible on dark surfaces */
}

/* ─────────────────────────────────────────
   Colour — light mode overrides
───────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --color-surface-base:    #f8fafc;
    --color-surface-default: #ffffff;
    --color-surface-raised:  #f1f5f9;
    --color-border-default:  #e2e8f0;
    --color-text-primary:    #0f172a;
    --color-text-secondary:  #64748b;
    --color-success:         #1f6b3f;  /* Cedar success/700 = --status-success */
    --color-error:           #b24949;  /* Cedar error/600 = action/destructive — dark-mode tint fails AA on white */
  }
}

/* ─────────────────────────────────────────
   Typography
───────────────────────────────────────── */
:root {
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─────────────────────────────────────────
   Layout
───────────────────────────────────────── */
:root {
  --nav-height:  64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}