/* ============================================================================
   GymDiet Master — Design Tokens (Phase 1.2)
   Single source of truth for color / spacing / typography / radius / shadow /
   motion. Loaded BEFORE theme.css and ui-kit.css so all downstream layers can
   reference these tokens via var(--gd-*).
   Naming convention: --gd-<category>-<role>-<variant>
   ============================================================================ */

:root,
:root[data-theme='light'] {
  /* -- Brand palette ---------------------------------------------------- */
  --gd-brand-primary: #2563eb;          /* deep blue, primary actions */
  --gd-brand-primary-hover: #1d4ed8;
  --gd-brand-primary-pressed: #1e40af;
  --gd-brand-primary-soft: rgba(37, 99, 235, 0.12);
  --gd-brand-accent: #00f076;           /* fresh green, success/progress */
  --gd-brand-accent-hover: #25b366;
  --gd-brand-accent-soft: rgba(0, 240, 118, 0.12);
  --gd-brand-gradient: linear-gradient(135deg, #00f076 0%, #2563eb 100%);
  --gd-brand-gradient-warm: linear-gradient(135deg, #fb923c 0%, #ec4899 100%);

  /* -- Semantic surfaces ----------------------------------------------- */
  --gd-bg: #f5f7fa;                     /* page background */
  --gd-surface: #ffffff;                /* cards, sheets */
  --gd-surface-2: #f8fafc;              /* nested / striped surfaces */
  --gd-surface-overlay: rgba(255, 255, 255, 0.88); /* glass over photo */
  --gd-border: #dbe3eb;
  --gd-border-strong: rgba(15, 23, 42, 0.16);
  --gd-border-subtle: rgba(15, 23, 42, 0.06);
  --gd-divider: rgba(148, 163, 184, 0.38);

  /* -- Text ------------------------------------------------------------ */
  --gd-text: #0f172a;
  --gd-text-muted: rgba(15, 23, 42, 0.68);
  --gd-text-subtle: rgba(15, 23, 42, 0.48);
  --gd-text-inverse: #ffffff;
  --gd-text-on-brand: #ffffff;
  --gd-text-on-accent: #052e16;

  /* -- Status feedback ------------------------------------------------- */
  --gd-success: #16a34a;
  --gd-success-bg: rgba(0, 240, 118, 0.12);
  --gd-success-border: rgba(0, 240, 118, 0.32);
  --gd-warning: #b45309;
  --gd-warning-bg: rgba(245, 158, 11, 0.14);
  --gd-warning-border: rgba(245, 158, 11, 0.32);
  --gd-danger: #b91c1c;
  --gd-danger-bg: rgba(239, 68, 68, 0.12);
  --gd-danger-border: rgba(239, 68, 68, 0.32);
  --gd-info: #2563eb;
  --gd-info-bg: rgba(59, 130, 246, 0.1);
  --gd-info-border: rgba(59, 130, 246, 0.26);

  /* -- Macro nutrient palette (reused across charts, rings, pills) ---- */
  --gd-macro-protein: #2563eb;
  --gd-macro-fat: #f59e0b;
  --gd-macro-carbs: #7c3aed;
  --gd-macro-fiber: #10b981;
  --gd-macro-water: #38bdf8;
  --gd-macro-calories: #ef4444;

  /* -- Elevation / shadow --------------------------------------------- */
  --gd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --gd-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --gd-shadow-3: 0 8px 28px rgba(15, 23, 42, 0.1);
  --gd-shadow-4: 0 18px 42px rgba(15, 23, 42, 0.14);
  --gd-shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.24);
  --gd-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.24);
  --gd-shadow-focus-accent: 0 0 0 3px rgba(0, 240, 118, 0.28);

  /* -- Dashboard hero -------------------------------------------------- */
  --gd-dashboard-hero-radius: 30px;
  --gd-dashboard-hero-bg:
    linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 255, 0.98) 52%, rgba(236, 243, 255, 0.98) 100%);
  --gd-dashboard-hero-border: rgba(148, 163, 184, 0.18);
  --gd-dashboard-hero-shadow:
    0 22px 50px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --gd-dashboard-hero-glow:
    radial-gradient(circle at 16% 18%, rgba(59, 130, 246, 0.16), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.12), transparent 34%);
  --gd-dashboard-hero-kicker: rgba(71, 85, 105, 0.78);
  --gd-dashboard-live-bg: rgba(34, 197, 94, 0.12);
  --gd-dashboard-live-border: rgba(34, 197, 94, 0.22);
  --gd-dashboard-live-text: #15803d;
  --gd-dashboard-ring-track: rgba(37, 52, 86, 0.16);
  --gd-dashboard-ring-rim: rgba(15, 23, 42, 0.07);
  --gd-dashboard-ring-fill-start: #7dd3fc;
  --gd-dashboard-ring-fill-end: #5b8def;
  --gd-dashboard-ring-center-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.98) 100%);
  --gd-dashboard-ring-center-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -18px 28px rgba(148, 163, 184, 0.12),
    0 18px 30px rgba(15, 23, 42, 0.08);
  --gd-dashboard-ring-center-border: rgba(148, 163, 184, 0.18);
  --gd-dashboard-ring-percent: rgba(71, 85, 105, 0.78);
  --gd-dashboard-macro-surface: rgba(255, 255, 255, 0.54);
  --gd-dashboard-macro-border: rgba(148, 163, 184, 0.16);
  --gd-dashboard-macro-separator: rgba(148, 163, 184, 0.22);
  --gd-dashboard-macro-track: rgba(148, 163, 184, 0.22);
  --gd-dashboard-advice-bg:
    linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(52, 211, 153, 0.08)),
    rgba(255, 255, 255, 0.7);
  --gd-dashboard-advice-border: rgba(148, 163, 184, 0.18);
  --gd-dashboard-advice-shadow:
    0 16px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --gd-dashboard-advice-icon-bg: rgba(255, 255, 255, 0.72);
  --gd-dashboard-advice-arrow-bg: rgba(255, 255, 255, 0.62);
}

:root[data-theme='dark'],
body.dark-theme {
  --gd-brand-primary: #5b8def;
  --gd-brand-primary-hover: #7aa6ff;
  --gd-brand-primary-pressed: #4877dc;
  --gd-brand-primary-soft: rgba(91, 141, 239, 0.18);
  --gd-brand-accent: #34d399;
  --gd-brand-accent-hover: #4ade80;
  --gd-brand-accent-soft: rgba(52, 211, 153, 0.18);
  --gd-brand-gradient: linear-gradient(135deg, #34d399 0%, #5b8def 100%);
  --gd-brand-gradient-warm: linear-gradient(135deg, #ff9e4d 0%, #ff5c9f 100%);

  --gd-bg: #0f0f23;
  --gd-surface: #1a1a2e;
  --gd-surface-2: #20203a;
  --gd-surface-overlay: rgba(26, 26, 46, 0.9);
  --gd-border: #2a2a4a;
  --gd-border-strong: rgba(255, 255, 255, 0.18);
  --gd-border-subtle: rgba(255, 255, 255, 0.06);
  --gd-divider: rgba(255, 255, 255, 0.12);

  --gd-text: #f8fafc;
  --gd-text-muted: rgba(248, 250, 252, 0.72);
  --gd-text-subtle: rgba(248, 250, 252, 0.5);
  --gd-text-inverse: #0f172a;
  --gd-text-on-brand: #ffffff;
  --gd-text-on-accent: #022c22;

  --gd-success: #4ade80;
  --gd-success-bg: rgba(74, 222, 128, 0.14);
  --gd-success-border: rgba(74, 222, 128, 0.34);
  --gd-warning: #fbbf24;
  --gd-warning-bg: rgba(251, 191, 36, 0.14);
  --gd-warning-border: rgba(251, 191, 36, 0.34);
  --gd-danger: #f87171;
  --gd-danger-bg: rgba(248, 113, 113, 0.14);
  --gd-danger-border: rgba(248, 113, 113, 0.36);
  --gd-info: #60a5fa;
  --gd-info-bg: rgba(96, 165, 250, 0.14);
  --gd-info-border: rgba(96, 165, 250, 0.32);

  --gd-macro-protein: #60a5fa;
  --gd-macro-fat: #fbbf24;
  --gd-macro-carbs: #a78bfa;
  --gd-macro-fiber: #34d399;
  --gd-macro-water: #38bdf8;
  --gd-macro-calories: #f87171;

  --gd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --gd-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.36);
  --gd-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.42);
  --gd-shadow-4: 0 18px 42px rgba(0, 0, 0, 0.5);
  --gd-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
  --gd-shadow-focus: 0 0 0 3px rgba(91, 141, 239, 0.4);
  --gd-shadow-focus-accent: 0 0 0 3px rgba(52, 211, 153, 0.42);

  --gd-dashboard-hero-radius: 30px;
  --gd-dashboard-hero-bg:
    linear-gradient(160deg, rgba(33, 42, 66, 0.98) 0%, rgba(24, 31, 51, 0.985) 48%, rgba(16, 23, 40, 0.995) 100%);
  --gd-dashboard-hero-border: rgba(194, 210, 255, 0.12);
  --gd-dashboard-hero-shadow:
    0 30px 64px rgba(2, 6, 23, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -22px 34px rgba(1, 6, 17, 0.34);
  --gd-dashboard-hero-glow:
    radial-gradient(circle at 14% 20%, rgba(91, 141, 239, 0.18), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(52, 211, 153, 0.1), transparent 36%);
  --gd-dashboard-hero-kicker: rgba(226, 232, 240, 0.68);
  --gd-dashboard-live-bg: rgba(74, 222, 128, 0.14);
  --gd-dashboard-live-border: rgba(74, 222, 128, 0.2);
  --gd-dashboard-live-text: #86efac;
  --gd-dashboard-ring-track: rgba(255, 255, 255, 0.08);
  --gd-dashboard-ring-rim: rgba(15, 23, 42, 0.42);
  --gd-dashboard-ring-fill-start: #82d9ff;
  --gd-dashboard-ring-fill-end: #5f86ff;
  --gd-dashboard-ring-center-bg:
    radial-gradient(circle at 50% 32%, rgba(38, 49, 77, 0.94), rgba(11, 18, 34, 0.98));
  --gd-dashboard-ring-center-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -22px 32px rgba(0, 0, 0, 0.42),
    0 22px 36px rgba(0, 0, 0, 0.28);
  --gd-dashboard-ring-center-border: rgba(148, 163, 184, 0.12);
  --gd-dashboard-ring-percent: rgba(226, 232, 240, 0.58);
  --gd-dashboard-macro-surface: rgba(255, 255, 255, 0.035);
  --gd-dashboard-macro-border: rgba(194, 210, 255, 0.08);
  --gd-dashboard-macro-separator: rgba(226, 232, 240, 0.08);
  --gd-dashboard-macro-track: rgba(226, 232, 240, 0.08);
  --gd-dashboard-advice-bg:
    linear-gradient(135deg, rgba(58, 98, 184, 0.22), rgba(52, 211, 153, 0.12)),
    rgba(255, 255, 255, 0.04);
  --gd-dashboard-advice-border: rgba(194, 210, 255, 0.1);
  --gd-dashboard-advice-shadow:
    0 22px 44px rgba(2, 6, 23, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --gd-dashboard-advice-icon-bg: rgba(255, 255, 255, 0.06);
  --gd-dashboard-advice-arrow-bg: rgba(255, 255, 255, 0.05);
}

/* -- Theme-agnostic scales (same in light and dark) ---------------------- */
:root {
  /* Spacing — 4px base, geometric scale */
  --gd-space-0: 0;
  --gd-space-1: 4px;
  --gd-space-2: 8px;
  --gd-space-3: 12px;
  --gd-space-4: 16px;
  --gd-space-5: 20px;
  --gd-space-6: 24px;
  --gd-space-8: 32px;
  --gd-space-10: 40px;
  --gd-space-12: 48px;
  --gd-space-16: 64px;
  --gd-space-20: 80px;

  /* Typography — Manrope */
  --gd-font-sans: 'Manrope', 'SF Pro Display', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --gd-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gd-text-2xs: 10px;
  --gd-text-xs: 12px;
  --gd-text-sm: 13px;
  --gd-text-md: 15px;
  --gd-text-lg: 17px;
  --gd-text-xl: 20px;
  --gd-text-2xl: 24px;
  --gd-text-3xl: 30px;
  --gd-text-4xl: 36px;

  --gd-leading-tight: 1.2;
  --gd-leading-snug: 1.35;
  --gd-leading-normal: 1.5;
  --gd-leading-relaxed: 1.65;

  --gd-weight-regular: 400;
  --gd-weight-medium: 500;
  --gd-weight-semibold: 600;
  --gd-weight-bold: 700;

  /* Radius */
  --gd-radius-xs: 4px;
  --gd-radius-sm: 8px;
  --gd-radius-md: 12px;
  --gd-radius-lg: 16px;
  --gd-radius-xl: 20px;
  --gd-radius-2xl: 24px;
  --gd-radius-full: 9999px;

  /* Motion */
  --gd-duration-instant: 80ms;
  --gd-duration-fast: 140ms;
  --gd-duration-medium: 220ms;
  --gd-duration-slow: 320ms;
  --gd-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --gd-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --gd-ease-accel: cubic-bezier(0.4, 0, 1, 1);
  --gd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --gd-z-base: 0;
  --gd-z-raised: 10;
  --gd-z-overlay: 100;
  --gd-z-sticky: 200;
  --gd-z-drawer: 300;
  --gd-z-modal: 400;
  --gd-z-toast: 500;
  --gd-z-tooltip: 600;

  /* Layout */
  --gd-max-w-content: 480px;            /* mobile-first container cap */
  --gd-tap-min: 44px;                   /* iOS minimum tap target */
}

/* Honor reduced-motion across all motion durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gd-duration-instant: 0ms;
    --gd-duration-fast: 0ms;
    --gd-duration-medium: 0ms;
    --gd-duration-slow: 0ms;
  }
}