/* ==============================================
   CORE VARIABLES & DESIGN TOKENS
   ============================================== */
/* SkillTrees Design System
   Single source of truth for all CSS variables.
   All other CSS files should reference these variables. */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* ==============================================
      BASE COLOR TOKENS
      ============================================== */
  --browser-theme-color: #000000;
  --browser-tile-color: #000000;
  --color-information: #007eff;
  --color-error: #ff0034;
  --color-warning: #f4e400;
  --color-accent: #ff5c00;
  --color-dark-text: #141414;
  --color-mono-strong: #141414;
  --color-mono-light: #ffffff;
  --color-slate-strong: #0a0a0a;

  /* ==============================================
      SEMANTIC COLOR ALIASES
      ============================================== */
  --color-primary-text: var(--text-primary);
  --color-dark-bg: var(--bg-primary);
  --color-secondary-bg: var(--bg-secondary);
  --color-inactive: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --color-hover: var(--bg-tertiary);
  --color-active: var(--bg-tertiary);
  --color-accent-blue: var(--color-information);
  --color-danger: var(--color-error);
  --color-hover-blue: var(--color-information);
  --color-error-red: var(--color-error);
  --color-light-blue: var(--color-information);
  --color-error-soft: color-mix(in srgb, var(--color-error) 22%, transparent);
  --color-error-strong: color-mix(in srgb, var(--color-error) 50%, transparent);
  --color-information-soft: color-mix(in srgb, var(--color-information) 22%, transparent);
  --color-information-strong: color-mix(in srgb, var(--color-information) 35%, transparent);
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 22%, transparent);
  --color-button-active: var(--color-information);
  --color-success: var(--color-information);
  --color-success-soft: color-mix(in srgb, var(--color-information) 22%, transparent);
  --color-overlay-strong: color-mix(in srgb, var(--bg-primary) 50%, transparent);
  --color-overlay-muted: color-mix(in srgb, var(--bg-primary) 40%, transparent);
  --color-surface-muted: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --color-surface-subtle: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --color-surface-emphasis: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --color-surface-strong: color-mix(in srgb, var(--text-primary) 20%, transparent);
  --color-surface-stronger: color-mix(in srgb, var(--text-primary) 30%, transparent);
  --color-surface-overlay: color-mix(in srgb, var(--bg-tertiary) 94%, transparent);
  --color-text-strong: color-mix(in srgb, var(--text-primary) 92%, transparent);
  --color-text-soft: color-mix(in srgb, var(--text-primary) 84%, transparent);
  --color-text-subtle: color-mix(in srgb, var(--text-primary) 70%, transparent);
  --color-text-faint: color-mix(in srgb, var(--text-primary) 40%, transparent);
  --color-muted-text: color-mix(in srgb, var(--text-primary) 60%, transparent);
  --color-muted-text-light: color-mix(in srgb, var(--text-primary) 70%, transparent);
  --color-muted-text-dark: color-mix(in srgb, var(--text-primary) 40%, transparent);
  --color-modal-backdrop: var(--color-overlay-muted);
  --color-border-subtle: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --color-border-strong: color-mix(in srgb, var(--text-primary) 30%, transparent);
  --color-calendar-workout: var(--color-accent);
  --color-calendar-workout-today: var(--color-error);
  --color-illustration-calisthenics-bg: #fad7d7;
  --color-illustration-cardio-bg: #a0e1fb;
  --color-illustration-lifting-bg: #f3ee59;
  --color-illustration-mobility-bg: #abafff;

  /* ==============================================
	      SEMANTIC BACKGROUND ALIASES
	      ============================================== */
  --bg-primary: #000000;
  /* Main Page Background */
  --bg-secondary: var(--color-slate-strong);
  /* Secondary background - unified for modals, cards, floating elements */
  --bg-tertiary: #141414;
  /* Third-level hierarchy, buttons, nested elements */
  --bg-modal: var(--bg-secondary);
  /* Modal background - unified */
  --bg-card: var(--bg-secondary);
  /* Card/content background */
  --bg-input: var(--bg-secondary);
  /* Input field background */
  --bg-button: var(--bg-tertiary);
  /* Button background */
  --bg-button-hover: var(--bg-tertiary);
  /* Button hover background */
  --bg-accent: color-mix(in srgb, var(--color-information) 18%, transparent);
  /* Accent button/element background */
  --bg-accent-hover: var(--bg-tertiary);
  /* Accent hover state */
  /* Legacy semantic aliases; prefer direct `--color-*` tokens in component CSS. */
  --bg-success-dark: var(--color-information);
  --bg-danger-dark: var(--color-error);
  --bg-info-dark: var(--color-information);
  --bg-warning-dark: var(--color-warning);
  --bg-success: var(--color-information);
  /* Success state background */
  --bg-danger: var(--color-error);
  /* Error/danger state background */
  --bg-warning: var(--color-warning);
  /* Warning state background */
  --container-bg: color-mix(in srgb, var(--text-primary) 13%, transparent);
  /* Container background (20% opacity primary text) */
  --container-bg-hover: color-mix(in srgb, var(--text-primary) 20%, transparent);
  /* Container hover background (30% opacity) */

  /* ==============================================
      TEXT COLOR ALIASES
      ============================================== */
  --text-primary: var(--color-mono-light);
  /* Primary text - same as --color-primary-text */
  --text-secondary: var(--color-text-strong);
  /* Secondary text - theme aware */
  --text-muted: var(--color-muted-text);
  /* Muted grey text */
  --text-accent: var(--color-information);
  /* Accent text color */
  --text-on-accent: var(--text-primary);
  /* Text on accent backgrounds */

  /* ==============================================
      BORDER RADIUS
      ============================================== */
  --radius-pill: 1000px;
  --radius-standard: 20px;

  /* ==============================================
      MODAL ELEMENT COLORS
      ============================================== */
  --modal-text-white: var(--text-primary);
  --modal-element-bg: color-mix(in srgb, var(--text-primary) 6%, transparent);
  /* 10% opacity for unselected */
  --modal-element-bg-equipment: color-mix(in srgb, var(--text-primary) 45%, transparent);
  --modal-element-bg-hover: color-mix(in srgb, var(--text-primary) 50%, transparent);
  /* 50% opacity for selected/hover */
  --modal-element-bg-hover-equipment: color-mix(in srgb, var(--text-primary) 50%, transparent);

  /* ==============================================
      SPACING
      ============================================== */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  /* ==============================================
      TYPOGRAPHY
      ============================================== */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family: 'Inter', sans-serif;
  --text-2xl: 32px;
  --text-xl: 24px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==============================================
      TRANSITIONS
      ============================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ==============================================
      Z-INDEX LAYERS
      ============================================== */
  --z-modal: 10001;
  --z-modal-backdrop: 10000;
  --z-modal-stacked: 10002;
  --z-dropdown: 500;
  --z-header: 100;
  --z-base: 1;

  /* ==============================================
      LAYOUT & PAGE STRUCTURE
      ============================================== */

  /* Global Page Padding/Margins */
  --page-padding-desktop: var(--space-lg);
  --page-padding-mobile: var(--space-md);
  --page-margin-desktop: 36px;
  --page-margin-mobile: var(--space-md);

  /* Shared SPA page shell */
  --spa-shell-max-width: 900px;
  --spa-shell-max-width-mobile: 420px;
  --spa-shell-inset-inline-desktop: var(--page-padding-desktop);
  --spa-shell-inset-inline-mobile: var(--page-margin-mobile);
  --spa-shell-inset-top-desktop: calc(80px + var(--safe-area-top));
  --spa-shell-inset-top-mobile: calc(40px + var(--safe-area-top));
  --spa-shell-inset-top-mobile-back-button: calc(56px + var(--safe-area-top));
  --spa-shell-inset-bottom-desktop: var(--page-padding-desktop);
  --spa-shell-inset-bottom-mobile: var(--space-xl);
  --spa-shell-inset-bottom-footer-nav: calc(var(--footer-nav-size) + var(--footer-nav-offset) + var(--space-xl) + var(--safe-area-bottom));

  /* Legacy aliases for backward compatibility (will be deprecated) */
  --home-container-padding-desktop: var(--page-padding-desktop);
  --home-container-padding-mobile: var(--page-padding-mobile);
  --home-horizontal-margin-desktop: var(--page-margin-desktop);
  --home-horizontal-margin-mobile: var(--page-margin-mobile);

  /* Card System */
  --square-card-size: 180px;
  --square-card-max-width-mobile: 180px;
  --square-card-padding: var(--space-md);
  --square-card-gap: var(--space-md);

  /* Legacy Card aliases */
  --skill-card-size: var(--square-card-size);
  --skill-card-gap-desktop: var(--square-card-gap);
  --skill-card-gap-mobile: var(--square-card-gap);

  /* Specialized Home/Workout Cards */
  --card-standard-width: 160px;
  --card-standard-height: 220px;
  --card-standard-gap: 12px;
  --card-grid-gap: var(--space-md);

  /* Legacy aliases */
  --home-card-width: var(--card-standard-width);
  --home-card-height: var(--card-standard-height);
  --home-card-gap: var(--card-standard-gap);
  --workout-card-width: var(--card-standard-width);
  --workout-card-height: var(--card-standard-height);
  --workout-card-gap: var(--card-standard-gap);
  --workout-card-padding: 18px 14px;

  /* Milestones list card system */
  --milestones-list-card-gap: 12px;
  --milestones-list-card-gap-mobile: 10px;
  --milestones-list-card-gap-desktop: 14px;
  --milestones-list-card-padding: 12px;
  --milestones-list-content-gap: 10px;
  --milestones-list-slot-padding: 10px 12px;
  --milestones-list-slot-gap: 6px;
  --milestones-list-illustration-width: 145px;
  --milestones-list-illustration-height: 200px;

  /* Safe area insets for notched devices (iOS/Android).
       --cap-safe-area-bottom is injected by the Android native layer as a fallback
       for Samsung WebViews that don't properly expose env(safe-area-inset-bottom)
       in edge-to-edge mode (targetSdk 35+). */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--cap-safe-area-bottom, 0px));
  --safe-area-left: env(safe-area-inset-left, 0px);
}

html[data-theme="light"] {
  color-scheme: light;
  --browser-theme-color: #f4f4f2;
  --browser-tile-color: #f4f4f2;
  --color-information: #007eff;
  --color-error: #ff0034;
  --color-warning: #f4e400;
  --color-accent: #ff5c00;
  --color-dark-text: #141414;
  --color-mono-strong: #141414;
  --color-mono-light: #ffffff;
  --color-slate-strong: #ffffff;
  --bg-primary: #f4f4f2;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e7e7e3;
  --bg-modal: var(--bg-secondary);
  --bg-card: var(--bg-secondary);
  --bg-input: var(--bg-secondary);
  --bg-button: var(--bg-tertiary);
  --bg-button-hover: var(--bg-tertiary);
  --bg-accent: color-mix(in srgb, var(--color-information) 16%, transparent);
  --bg-accent-hover: color-mix(in srgb, var(--color-information) 22%, transparent);
  --bg-success-dark: var(--color-information);
  --bg-danger-dark: var(--color-error);
  --bg-info-dark: var(--color-information);
  --bg-warning-dark: var(--color-warning);
  --bg-success: var(--color-information);
  --bg-danger: var(--color-error);
  --bg-warning: var(--color-warning);
  --text-primary: #141414;
  --color-primary-text: var(--text-primary);
  --color-dark-bg: var(--bg-primary);
  --color-secondary-bg: var(--bg-secondary);
  --color-inactive: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --color-hover: var(--bg-tertiary);
  --color-active: var(--bg-tertiary);
  --color-accent-blue: var(--color-information);
  --color-danger: var(--color-error);
  --color-hover-blue: var(--color-information);
  --color-error-red: var(--color-error);
  --color-light-blue: var(--color-information);
  --color-error-soft: color-mix(in srgb, var(--color-error) 18%, transparent);
  --color-error-strong: color-mix(in srgb, var(--color-error) 35%, transparent);
  --color-information-soft: color-mix(in srgb, var(--color-information) 18%, transparent);
  --color-information-strong: color-mix(in srgb, var(--color-information) 30%, transparent);
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 22%, transparent);
  --color-button-active: var(--color-information);
  --color-success: var(--color-information);
  --color-success-soft: color-mix(in srgb, var(--color-information) 18%, transparent);
  --color-overlay-strong: color-mix(in srgb, #000000 50%, transparent);
  --color-overlay-muted: color-mix(in srgb, #000000 40%, transparent);
  --color-surface-muted: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --color-surface-subtle: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --color-surface-emphasis: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --color-surface-strong: color-mix(in srgb, var(--text-primary) 18%, transparent);
  --color-surface-stronger: color-mix(in srgb, var(--text-primary) 28%, transparent);
  --color-surface-overlay: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
  --color-text-strong: color-mix(in srgb, var(--text-primary) 88%, transparent);
  --color-text-soft: color-mix(in srgb, var(--text-primary) 76%, transparent);
  --color-text-subtle: color-mix(in srgb, var(--text-primary) 60%, transparent);
  --color-text-faint: color-mix(in srgb, var(--text-primary) 40%, transparent);
  --color-muted-text: color-mix(in srgb, var(--text-primary) 60%, transparent);
  --color-muted-text-light: color-mix(in srgb, var(--text-primary) 70%, transparent);
  --color-muted-text-dark: color-mix(in srgb, var(--text-primary) 40%, transparent);
  --color-modal-backdrop: var(--color-overlay-muted);
  --color-border-subtle: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --color-border-strong: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --container-bg: color-mix(in srgb, var(--text-primary) 13%, transparent);
  --container-bg-hover: color-mix(in srgb, var(--text-primary) 20%, transparent);
  --text-secondary: var(--color-text-strong);
  --text-muted: var(--color-muted-text);
  --text-accent: var(--color-information);
  --text-on-accent: var(--color-dark-text);
  --modal-text-white: var(--text-primary);
  --modal-element-bg: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --modal-element-bg-equipment: color-mix(in srgb, var(--text-primary) 20%, transparent);
  --modal-element-bg-hover: color-mix(in srgb, var(--text-primary) 16%, transparent);
  --modal-element-bg-hover-equipment: color-mix(in srgb, var(--text-primary) 24%, transparent);
}

/* Older iOS fallback uses constant() instead of env() */
@supports (padding: constant(safe-area-inset-top)) {
  :root {
    --safe-area-top: constant(safe-area-inset-top);
    --safe-area-right: constant(safe-area-inset-right);
    --safe-area-bottom: constant(safe-area-inset-bottom);
    --safe-area-left: constant(safe-area-inset-left);
  }
}