/* public/css/theme.css -- 6Pack Dashboard Design System */
/* Source of truth: 02-UI-SPEC.md CSS Custom Properties Master List */

:root {
  /* Spacing (multiples of 4/8) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Typography sizes */
  --text-label: 12px;
  --text-body: 14px;
  --text-heading: 20px;
  --text-kpi: 48px;

  /* Surfaces (dark theme default) */
  --bg-primary: #1a1f36;
  --bg-card: #252b43;
  --bg-card-hover: #2d3455;

  /* Text */
  --text-primary: #e4e6ef;
  --text-secondary: #8f95b2;
  --text-heading-color: #ffffff;

  /* Semantic status (theme-independent) */
  --color-success: #00E396;
  --color-danger: #FF4560;
  --color-info: #008FFB;
  --color-warning: #FEB019;

  /* Chrome */
  --gauge-track: #3a3f5c;
  --border-color: #3a3f5c;
  --border-radius: 12px;
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.3);

  /* ---------------- Component tokens (Phase A — 2026-04-16) ---------------- */
  /* Layered on primitives above. Redesign mandate: bump component tokens, not primitives.
     See docs/design-tokens-source.md for measurement rationale. */

  /* Card padding */
  --card-padding: var(--space-lg);         /* 24px default */
  --card-padding-lg: var(--space-xl);      /* 32px hero (Biometrics top row, Dashboard KPI row) */
  --card-padding-sm: var(--space-md);      /* 16px dense list rows */

  /* Grid + card internals */
  --grid-gap: var(--space-lg);             /* 24px between cards */
  --card-stack-gap: var(--space-md);       /* 16px inside a card */

  /* Typography tiers (KPI has 3 sizes: inline / default / hero) */
  --text-kpi-lg: 56px;                     /* hero KPI (Biometrics current weight) */
  --text-kpi-sm: 32px;                     /* inline KPI (Nutrition 5-card row) */
  --text-subtitle: 14px;                   /* "vs. last month", muted labels */

  /* Line heights */
  --leading-tight: 1.15;                   /* KPI numbers */
  --leading-normal: 1.5;                   /* body text */

  /* Radius tiers (--border-radius kept above as alias of --radius-md) */
  --radius-sm: 8px;                        /* chips, pills */
  --radius-md: 12px;                       /* cards (same as --border-radius) */
  --radius-lg: 16px;                       /* hero cards, modals */
  --radius-full: 9999px;                   /* avatar circles */

  /* Muted text alias — reuses --text-secondary, theme-aware automatically */
  --text-muted: var(--text-secondary);

  /* Delta tokens (redesign principle: direction of travel, phase-aware) */
  --delta-up: var(--color-success);        /* #00E396 green */
  --delta-down: var(--color-danger);       /* #FF4560 red */
  --delta-flat: var(--text-secondary);     /* muted gray */
}

[data-theme="light"] {
  --bg-primary: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --text-primary: #1a1f36;
  --text-secondary: #6b7280;
  --text-heading-color: #111827;
  --gauge-track: #e5e7eb;
  --border-color: #e5e7eb;
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: background-color 0.3s, color 0.3s;
  }
}