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

:root {
  color-scheme: dark;
  /* ==============================================
      BRAND COLORS (Primary Palette)
      ============================================== */

  /* Primary Colors */
  --color-primary-text: #EEFDF9;
  /* Main text color for high contrast on dark backgrounds */
  --color-dark-bg: var(--bg-primary);
  /* Dark background color for main containers */
  --color-secondary-bg: var(--bg-secondary);
  /* Secondary background color for cards and modals */

  /* Interactive States */
  --color-inactive: rgba(238, 253, 249, 0.063);
  /* Color for inactive elements that you can't click */
  --color-hover: #3a3a3a;
  /* Color for hover state for background of buttons or elements with --color-secondary-bg in hover */
  --color-active: #656A6B;
  /* Color for active state for background of buttons or elements with --color-secondary-bg in active */

  /* Accent Colors */
  --color-accent-blue: #004ba8;
  --color-hover-blue: #143B6A;
  --color-error-red: #FF681F;
  --color-light-blue: #7fd2ed;
  /* Accent color for text that can be clicked, but doesn't have a container (example: links to the terms of service which are inline text links) */
  --color-button-active: #004ba8;
  /* Color for buttons when active */
  --color-success-green: #10b981;
  /* Color for success states, checkboxes, and positive actions */
  --color-success-green-light: rgba(16, 185, 129, 0.2);
  /* Light overlay for success state focus rings */

  /* Secondary Text Colors */
  --color-muted-text: #9ca3af;
  /* Muted/secondary text for reduced emphasis */
  --color-muted-text-light: #b4b7bd;
  /* Lighter muted text */
  --color-muted-text-dark: #6b7280;
  /* Darker muted text for subtle information */

	  /* Component Colors */
	  --color-modal-backdrop: rgba(0, 0, 0, 0.4);
	  /* Semi-transparent backdrop for modals */
	  --color-border-subtle: #374151;
	  /* Subtle borders and dividers */
	  --color-calendar-workout: #ea682b;
	  --color-calendar-workout-today: #eca07d;

	  /* ==============================================
	      SEMANTIC BACKGROUND ALIASES
	      ============================================== */
  --bg-primary: #121212;
  /* Main Page Background */
  --bg-secondary: #212121;
  /* Secondary background - unified for modals, cards, floating elements */
  --bg-tertiary: #313131;
  /* 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: #3a3a3a;
  /* Button hover background */
  --bg-accent: #D9D9D950;
  /* Accent button/element background */
  --bg-accent-hover: #03a3b1;
  /* Accent hover state */
  --bg-success: #4a9eff;
  /* Success state background */
  --bg-danger: #ee2e24;
  /* Error/danger state background */
  --bg-warning: #fdb714;
  /* Warning state background */
  --container-bg: #EEFDF920;
  /* Container background (20% opacity primary text) */
  --container-bg-hover: #EEFDF930;
  /* Container hover background (30% opacity) */

  /* ==============================================
      TEXT COLOR ALIASES
      ============================================== */
  --text-primary: #EEFDF9;
  /* Primary text - same as --color-primary-text */
  --text-secondary: #EEFDF9;
  /* Secondary text - unified */
  --text-muted: #9ca3af;
  /* Muted grey text */
  --text-accent: #4a9eff;
  /* Accent text color */
  --text-on-accent: #ffffff;
  /* Text on accent backgrounds */

  /* ==============================================
      BORDERS
      ============================================== */
  --border-primary: #3a3a3a;
  /* Primary border color */
  --border-secondary: #2a2a2a;
  /* Secondary border color */
  --border-accent: #03a3b1;
  /* Accent border color */

  /* ==============================================
      BORDER RADIUS
      ============================================== */
  --border-radius: 12px;
  /* Standard border radius */
  --border-radius-sm: 8px;
  /* Small border radius */
  --border-radius-lg: 16px;
  /* Large border radius */

  /* ==============================================
      MODAL ELEMENT COLORS
      ============================================== */
  --modal-text-white: #EEFDF9;
  --modal-element-bg: #EEFDF910;
  /* 10% opacity for unselected */
  --modal-element-bg-equipment: #EEFDF970;
  --modal-element-bg-hover: #EEFDF950;
  /* 50% opacity for selected/hover */
  --modal-element-bg-hover-equipment: #EEFDF950;

  /* ==============================================
      SHADOWS
      ============================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.35);

  /* ==============================================
      SPACING
      ============================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* ==============================================
      TYPOGRAPHY
      ============================================== */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family: 'Inter', sans-serif;
  /* Unified font sizes */
  --font-size-big-title: 36px;
  /* Big titles (e.g., .page-main-title) */
  --font-size-small-title: 24px;
  /* Smaller titles */
  --font-size-main-text: 16px;
  /* Main text (e.g., .workout-item-title, .exercise-name) */
  --font-size-middle: 14px;
  /* Middle content (e.g., .folder-tab) */
  --font-size-small: 12px;
  /* Small text (e.g., calendar widget titles) */
  --font-size-tiny: 8px;
  /* Tiny text (e.g., calendar day numbers) */
  --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-dropdown: 500;
  --z-header: 100;
  --z-base: 1;

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

  /* Global Page Padding/Margins */
  --page-padding-desktop: 24px;
  --page-padding-mobile: 16px;
  --page-margin-desktop: 36px;
  --page-margin-mobile: 16px;

  /* 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-border-radius: 20px;
  --square-card-padding: 16px;
  --square-card-gap: 16px;

  /* 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-radius: 20px;
  --card-standard-gap: 12px;

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

  /* Safe area insets for notched devices (iOS/Android) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

/* 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);
  }
}