/* TrackMySet Web v2 — design tokens (iOS ThemeColors dark/light starters) */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #16161a;
  --bg-glass: #1e1e24;
  --bg-glass-hover: rgba(255, 255, 255, 0.075);
  --bg-input: #24242a;
  --text-main: #f4f7fc;
  --text-muted: #94a3b8;
  --text-on-accent: #0a0a0f;
  --border-glass: rgba(148, 163, 184, 0.18);
  --accent: #60a5fa;
  --accent-dark: #3b82f6;
  --danger: #f87171;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.22);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --life-macro: #ff6b6b;
  --life-sleep: #748ffc;
  --life-zen: #ae3ec9;
  --life-reading: #69db7c;

  --tab-bar-h: 72px;
  --nav-h: 52px;

  /* Mobile-first shell — content never wider than iPad portrait */
  --app-max-width: 768px;
  --app-gutter: 16px;
  --app-frame-bg: #0a0a0f;
  --module-list-gap: 8px;

  /* Expressive typography (iOS Theme typography tokens) */
  --type-title: 22px;
  --type-module-name: 17px;
  --type-body: 15px;
  --type-caption: 12px;
  --type-display: 28px;
  --success: #34d399;
}

[data-theme="light"] {
  color-scheme: light;

  --bg-app: #f2f4f8;
  --bg-glass: rgba(255, 255, 255, 0.94);
  --bg-glass-hover: rgba(37, 99, 235, 0.1);
  --bg-input: rgba(255, 255, 255, 0.95);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-on-accent: #ffffff;
  --border-glass: rgba(100, 116, 139, 0.32);
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --danger: #dc2626;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.07);

  --app-frame-bg: #cbd5e1;

  --type-title: 22px;
  --type-module-name: 17px;
  --type-body: 15px;
  --type-caption: 12px;
  --type-display: 28px;
  --success: #16a34a;
}

[data-theme="vanilla"] {
  color-scheme: light;

  --bg-app: #f4eed7;
  --bg-glass: #f5f2e8;
  --bg-glass-hover: #dbd2b1;
  --bg-input: #f8f7f5;
  --text-main: #92764d;
  --text-muted: #bda583;
  --text-on-accent: #fff7ea;
  --border-glass: #e9d8bf;
  --accent: #966755;
  --accent-dark: #cda900;
  --danger: #dc2626;

  --shadow-card: 0 2px 10px rgba(255, 148, 0, 0.12);
  --app-frame-bg: #e9d8bf;
  --success: #16a34a;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
}

[data-theme="lime"] {
  color-scheme: light;

  --bg-app: #d5ffb8;
  --bg-glass: #b9e997;
  --bg-glass-hover: #e4ffd0;
  --bg-input: #d5ffb8;
  --text-main: #6c5a53;
  --text-muted: #7e7876;
  --text-on-accent: #f6f9f4;
  --border-glass: rgba(239, 255, 126, 0.67);
  --accent: #00ba03;
  --accent-dark: #928862;
  --danger: #dc2626;

  --shadow-card: 0 6px 18px rgba(245, 255, 85, 0.10);
  --app-frame-bg: #c8f0a8;
  --success: #00c837;
  --radius-sm: 7px;
  --radius-md: 7px;
  --radius-lg: 7px;
}

/* Legacy modal engine aliases — always derived from the active v2 theme tokens */
html[data-theme="dark"],
html[data-theme="light"],
html[data-theme="vanilla"],
html[data-theme="lime"] {
  --accent-primary: var(--accent);
  --accent-primary-dark: var(--accent-dark);
  --accent-primary-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-primary-bg-strong: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-glow-subtle: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-danger: var(--danger);
  --accent-success: var(--success);
  --bg-glass-nav: var(--bg-glass);
  --bg-glass-hover: var(--bg-glass-hover);
  --bg-input: var(--bg-input);
}