/* LifePilot Design Tokens — Light & Dark Mode */

:root {
  /* === COLORS — LIGHT MODE === */
  --bg: #F8F6F1;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --text: #2D2D2D;
  --text-secondary: #6B6B6B;
  --text-faint: #9E9E9E;
  --primary: #4A9B8E;
  --primary-hover: #3D8276;
  --primary-light: rgba(74, 155, 142, 0.10);
  --primary-lighter: rgba(74, 155, 142, 0.06);
  --accent: #E8845C;
  --accent-hover: #D4713F;
  --accent-light: rgba(232, 132, 92, 0.10);
  --energy-low: #E8685C;
  --energy-low-bg: rgba(232, 104, 92, 0.08);
  --energy-low-light: rgba(232, 104, 92, 0.15);
  --energy-mid: #E8A83C;
  --energy-mid-bg: rgba(232, 168, 60, 0.08);
  --energy-mid-light: rgba(232, 168, 60, 0.15);
  --energy-high: #4AAE6F;
  --energy-high-bg: rgba(74, 174, 111, 0.08);
  --energy-high-light: rgba(74, 174, 111, 0.15);
  --border: #E8E5DF;
  --divider: #F0EDE8;
  --shadow-sm: 0 1px 3px rgba(45, 45, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 45, 45, 0.08);
  --shadow-lg: 0 8px 24px rgba(45, 45, 45, 0.10);
  --overlay: rgba(45, 45, 45, 0.5);

  /* Category colors */
  --cat-shopping: #7A39BB;
  --cat-todo: #E8845C;
  --cat-idea: #E8A83C;
  --cat-important: #E8685C;

  /* Planner block colors */
  --block-exercise: rgba(74, 155, 142, 0.12);
  --block-meal: rgba(232, 132, 92, 0.12);
  --block-focus: rgba(106, 90, 205, 0.10);
  --block-break: rgba(232, 104, 92, 0.08);

  /* Module tints */
  --tint-training: rgba(74, 155, 142, 0.10);
  --tint-nutrition: rgba(232, 132, 92, 0.08);
  --tint-kopffrei: rgba(150, 120, 200, 0.10);
  --tint-blitz: rgba(232, 168, 60, 0.10);

  /* === TYPOGRAPHY === */
  --font-display: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* === SPACING (4px base) === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === RADIUS === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* === LAYOUT === */
  --nav-height: 60px;
  --header-height: 52px;
  --fab-size: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* === DARK MODE === */
[data-theme="dark"] {
  --bg: #1A1A1E;
  --surface: #252529;
  --surface-elevated: #2D2D33;
  --text: #E8E6E1;
  --text-secondary: #9B9A96;
  --text-faint: #6B6A66;
  --primary: #5BB8A8;
  --primary-hover: #4AA89A;
  --primary-light: rgba(91, 184, 168, 0.12);
  --primary-lighter: rgba(91, 184, 168, 0.06);
  --accent: #F0956E;
  --accent-hover: #E0804A;
  --accent-light: rgba(240, 149, 110, 0.12);
  --energy-low: #F07A6E;
  --energy-low-bg: rgba(240, 122, 110, 0.10);
  --energy-low-light: rgba(240, 122, 110, 0.18);
  --energy-mid: #F0B84E;
  --energy-mid-bg: rgba(240, 184, 78, 0.10);
  --energy-mid-light: rgba(240, 184, 78, 0.18);
  --energy-high: #5CC07F;
  --energy-high-bg: rgba(92, 192, 127, 0.10);
  --energy-high-light: rgba(92, 192, 127, 0.18);
  --border: #3A3A40;
  --divider: #2D2D33;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --overlay: rgba(0, 0, 0, 0.6);

  --cat-shopping: #A86FDF;
  --cat-todo: #F0956E;
  --cat-idea: #F0B84E;
  --cat-important: #F07A6E;

  --block-exercise: rgba(91, 184, 168, 0.15);
  --block-meal: rgba(240, 149, 110, 0.15);
  --block-focus: rgba(140, 120, 220, 0.12);
  --block-break: rgba(240, 122, 110, 0.10);

  --tint-training: rgba(91, 184, 168, 0.12);
  --tint-nutrition: rgba(240, 149, 110, 0.10);
  --tint-kopffrei: rgba(160, 130, 220, 0.12);
  --tint-blitz: rgba(240, 184, 78, 0.12);
}