/* ==========================================================================
 *  TOKENS — ΜΙΑ πηγή αλήθειας για χρώματα & design tokens (Phase 2a)
 *
 *  Φορτώνεται ΤΕΛΕΥΤΑΙΟ στο index.html, οπότε αυτές οι τιμές «νικούν» όλα τα
 *  διάσπαρτα :root / [data-theme="dark"] blocks μέσα στο styles.css.
 *
 *  ➜ Από εδώ και πέρα, άλλαξε χρώματα ΜΟΝΟ εδώ. Δεν χρειάζεται να ψάχνεις
 *    στις 2400 γραμμές του styles.css.
 *
 *  Οι τιμές είναι ΑΚΡΙΒΩΣ αυτές που ίσχυαν ήδη (last-wins merge των
 *  2× :root + 2× dark blocks) — οπότε ΜΗΔΕΝ οπτική αλλαγή.
 * ========================================================================== */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --text: #1b2530;
  --muted: #56636c;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --label: #374151;
  --caption: #56636c;
  --placeholder: #6b7280;
  --border: #e7eaef;
  --primary: #0f8a72;
  --primary-ink: #ffffff;
  --primary-soft: #d6efe8;
  --ink: #18181b;
  --ink-ink: #ffffff;
  --accent: #fb7a54;
  --accent-2: #ffb14d;
  --coral: #ef6a63;
  --yes: #12a37a;
  --no: #e2685a;
  --grad-warm: linear-gradient(135deg, #fb7a54 0%, #ffb14d 100%);
  --grad-teal: linear-gradient(135deg, #1493a8 0%, #0c6d84 100%);
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
  --shadow-lg: 0 12px 34px rgba(16,24,40,.14);
  --shadow-warm: 0 8px 22px rgba(255, 138, 91, .22);
  --radius: 16px;
  --radius-sm: 12px;
  --tabbar-h: 64px;

  /* Design System v3 — shared landing + dashboards */
  --ds-ink: #111827;
  --ds-secondary: #374151;
  --ds-surface: #ffffff;
  --ds-success: #10b981;
  --ds-blue: #3b82f6;
  --ds-blue-dark: #2563eb;
  --ds-purple: #8b5cf6;
  --ds-purple-dark: #7c3aed;
  --ds-pink: #ec4899;
  --ds-orange: #f97316;
  --ds-yellow: #facc15;
  --ds-emerald: #10b981;
  --ds-emerald-dark: #059669;
  --ds-radius: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-pill: 999px;
  --grad-ds-primary: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-purple) 52%, var(--ds-emerald) 100%);
  --grad-ds-btn: linear-gradient(135deg, var(--ds-blue), var(--ds-purple));
  --grad-ds-btn-hover: linear-gradient(135deg, var(--ds-blue-dark), var(--ds-purple-dark));
  --ds-glass: rgba(255, 255, 255, .74);
  --ds-glass-border: rgba(15, 23, 42, .08);
  --ds-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --ds-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 20px 48px rgba(15, 23, 42, .1);
  --ds-shadow-glow: 0 8px 32px color-mix(in srgb, var(--ds-purple) 22%, transparent);
}

[data-theme="dark"] {
  --bg: #0f1719;
  --surface: #161f23;
  --surface-2: #1e2a30;
  --text: #e9f0f2;
  --muted: #c2cfd6;
  --text-secondary: #d4dee3;
  --text-tertiary: #b8c5cc;
  --label: #e8eef1;
  --caption: #c5d0d6;
  --placeholder: #9fb0b8;
  --border: #27353c;
  --primary: #2fc6a6;
  --primary-ink: #06201a;
  --primary-soft: #143a32;
  --ink: #f4f4f5;
  --ink-ink: #18181b;
  --accent: #ff8f66;
  --accent-2: #ffc06a;
  --coral: #f0857a;
  --yes: #3cc09a;
  --no: #ef8472;
  --grad-warm: linear-gradient(135deg, #ff8f66 0%, #ffc06a 100%);
  --grad-teal: linear-gradient(135deg, #1aa5b8 0%, #128298 100%);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.55);
  --shadow-warm: 0 8px 24px rgba(255, 138, 91, .18);
  --ds-glass: rgba(22, 31, 35, .78);
  --ds-glass-border: rgba(255, 255, 255, .1);
  --ds-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --ds-shadow-hover: 0 4px 8px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .45);
}