/**
 * Design Tokens
 * Source of truth for colors, typography, spacing, layout, and motion.
 * Tokens stay presentation-agnostic so utilities, components, and layouts
 * can stay lightweight and composable.
 */

:root {
  /* ===== Color System ===== */
  --color-base-black: #000000;
  --color-base-white: #ffffff;
  --color-base-dark: #1e1e1c;
  --color-base-light: #f5f5f5;
  --color-base-gray: #666666;
  --color-base-gray-light: #9c9c9c;
  --color-border-light: #e0e0e0;
  --color-border-dark: #333333;

  --surface-primary: var(--color-base-white);
  --surface-secondary: var(--color-base-light);
  --text-primary: var(--color-base-black);
  --text-secondary: var(--color-base-gray);
  --text-tertiary: var(--color-base-gray-light);
  --border-color: var(--color-border-light);

  /* ===== Typography ===== */
  --font-serif: 'Palatino', 'Palatino LT Pro', serif;
  --font-sans: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);

  /* Fluid Typography - Desktop-first with smooth viewport-based scaling */
  --font-size-display-xxl: clamp(4rem, 6.5vw + 2rem, 8.75rem);        /* 64px → 140px */
  --font-size-display-xl: clamp(3rem, 4vw + 1.5rem, 6.25rem);         /* 48px → 100px */
  --font-size-display-lg: clamp(2.25rem, 2.5vw + 1.25rem, 4.375rem);  /* 36px → 70px */
  --font-size-heading-lg: clamp(1.5rem, 1.5vw + 0.75rem, 2rem);       /* 24px → 32px */
  --font-size-heading-md: clamp(1.25rem, 1vw + 0.75rem, 1.75rem);     /* 20px → 28px */
  --font-size-heading-sm: clamp(1.125rem, 0.75vw + 0.75rem, 1.5rem);  /* 18px → 24px */
  --font-size-base: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);           /* 16px → 18px */
  --font-size-sm: 14px;
  --font-size-xs: 11px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 0.8;
  --line-height-base: 0.85;
  --line-height-relaxed: 1.1;
  --line-height-loose: 1.3;
  --line-height-paragraph: 1.4;

  /* Simplified letter-spacing - em-based only for scalability */
  --letter-spacing-tight: -0.04em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* ===== Typography Semantics ===== */
  --type-fluid-breakpoint: 720px;

  /* Display scale */
  --type-display-xxl-font-family: var(--font-display);
  --type-display-xxl-font-weight: var(--font-weight-light);
  --type-display-xxl-font-size: var(--font-size-display-xxl);
  --type-display-xxl-font-size-fluid: clamp(2.75rem, 8vw + 1rem, 4.75rem);
  --type-display-xxl-line-height: var(--line-height-base);
  --type-display-xxl-line-height-fluid: 1.05;
  --type-display-xxl-letter-spacing: var(--letter-spacing-tight);
  --type-display-xxl-letter-spacing-fluid: -0.02em;

  --type-display-xl-font-family: var(--font-display);
  --type-display-xl-font-weight: var(--font-weight-light);
  --type-display-xl-font-size: var(--font-size-display-xl);
  --type-display-xl-font-size-fluid: clamp(2.25rem, 6.5vw + 0.75rem, 4rem);
  --type-display-xl-line-height: var(--line-height-base);
  --type-display-xl-line-height-fluid: 1.05;
  --type-display-xl-letter-spacing: var(--letter-spacing-tight);
  --type-display-xl-letter-spacing-fluid: -0.015em;

  --type-display-lg-font-family: var(--font-display);
  --type-display-lg-font-weight: var(--font-weight-light);
  --type-display-lg-font-size: var(--font-size-display-lg);
  --type-display-lg-font-size-fluid: clamp(2rem, 5vw + 0.75rem, 3.25rem);
  --type-display-lg-line-height: var(--line-height-base);
  --type-display-lg-line-height-fluid: 1.05;
  --type-display-lg-letter-spacing: var(--letter-spacing-tight);
  --type-display-lg-letter-spacing-fluid: -0.01em;

  /* Heading scale */
  --type-heading-lg-font-family: var(--font-body);
  --type-heading-lg-font-weight: var(--font-weight-bold);
  --type-heading-lg-font-size: var(--font-size-heading-lg);
  --type-heading-lg-font-size-fluid: clamp(1.35rem, 3vw + 0.75rem, 1.75rem);
  --type-heading-lg-line-height: var(--line-height-tight);
  --type-heading-lg-line-height-fluid: 1.2;
  --type-heading-lg-letter-spacing: var(--letter-spacing-tight);
  --type-heading-lg-letter-spacing-fluid: var(--letter-spacing-normal);

  --type-heading-md-font-family: var(--font-body);
  --type-heading-md-font-weight: var(--font-weight-medium);
  --type-heading-md-font-size: var(--font-size-heading-md);
  --type-heading-md-font-size-fluid: clamp(1.15rem, 2.5vw + 0.65rem, 1.5rem);
  --type-heading-md-line-height: var(--line-height-tight);
  --type-heading-md-line-height-fluid: 1.2;
  --type-heading-md-letter-spacing: var(--letter-spacing-tight);
  --type-heading-md-letter-spacing-fluid: var(--letter-spacing-normal);

  --type-heading-sm-font-family: var(--font-body);
  --type-heading-sm-font-weight: var(--font-weight-medium);
  --type-heading-sm-font-size: var(--font-size-heading-sm);
  --type-heading-sm-font-size-fluid: clamp(1.05rem, 2vw + 0.6rem, 1.375rem);
  --type-heading-sm-line-height: var(--line-height-relaxed);
  --type-heading-sm-line-height-fluid: 1.25;
  --type-heading-sm-letter-spacing: var(--letter-spacing-normal);
  --type-heading-sm-letter-spacing-fluid: var(--letter-spacing-normal);

  /* Footer (Heading S with regular weight) */
  --type-footer-font-family: var(--font-body);
  --type-footer-font-weight: var(--font-weight-regular);
  --type-footer-font-size: var(--font-size-heading-sm);
  --type-footer-font-size-fluid: clamp(1.05rem, 2vw + 0.6rem, 1.375rem);
  --type-footer-line-height: var(--line-height-relaxed);
  --type-footer-line-height-fluid: 1.25;
  --type-footer-letter-spacing: var(--letter-spacing-normal);
  --type-footer-letter-spacing-fluid: var(--letter-spacing-normal);

  /* Body scale */
  --type-body-font-family: var(--font-body);
  --type-body-font-weight: var(--font-weight-regular);
  --type-body-font-size: var(--font-size-base);
  --type-body-font-size-fluid: clamp(0.95rem, 2vw + 0.65rem, 1.05rem);
  --type-body-line-height: var(--line-height-paragraph);
  --type-body-line-height-fluid: 1.5;
  --type-body-letter-spacing: var(--letter-spacing-normal);
  --type-body-letter-spacing-fluid: var(--letter-spacing-normal);

  --type-body-serif-font-family: var(--font-display);
  --type-body-serif-font-weight: var(--font-weight-regular);
  --type-body-serif-font-size: var(--font-size-base);
  --type-body-serif-font-size-fluid: clamp(0.95rem, 1.8vw + 0.65rem, 1.05rem);
  --type-body-serif-line-height: var(--line-height-paragraph);
  --type-body-serif-line-height-fluid: 1.5;
  --type-body-serif-letter-spacing: var(--letter-spacing-normal);
  --type-body-serif-letter-spacing-fluid: var(--letter-spacing-normal);

  --type-body-strong-font-family: var(--font-body);
  --type-body-strong-font-weight: var(--font-weight-medium);
  --type-body-strong-font-size: var(--font-size-base);
  --type-body-strong-font-size-fluid: clamp(1rem, 2vw + 0.7rem, 1.125rem);
  --type-body-strong-line-height: var(--line-height-loose);
  --type-body-strong-line-height-fluid: 1.4;
  --type-body-strong-letter-spacing: var(--letter-spacing-normal);
  --type-body-strong-letter-spacing-fluid: var(--letter-spacing-normal);

  --type-label-font-family: var(--font-body);
  --type-label-font-weight: var(--font-weight-regular);
  --type-label-font-size: var(--font-size-base);
  --type-label-font-size-fluid: clamp(0.9rem, 1.6vw + 0.7rem, 1rem);
  --type-label-line-height: var(--line-height-relaxed);
  --type-label-line-height-fluid: var(--line-height-relaxed);
  --type-label-letter-spacing: var(--letter-spacing-wide);
  --type-label-letter-spacing-fluid: var(--letter-spacing-wide);

  --type-button-font-family: var(--font-body);
  --type-button-font-weight: var(--font-weight-medium);
  --type-button-font-size: var(--font-size-xs);
  --type-button-font-size-fluid: var(--font-size-xs);
  --type-button-line-height: var(--line-height-relaxed);
  --type-button-line-height-fluid: var(--line-height-relaxed);
  --type-button-letter-spacing: var(--letter-spacing-wide);
  --type-button-letter-spacing-fluid: var(--letter-spacing-wide);

  --type-caption-font-family: var(--font-body);
  --type-caption-font-weight: var(--font-weight-regular);
  --type-caption-font-size: var(--font-size-xs);
  --type-caption-font-size-fluid: var(--font-size-xs);
  --type-caption-line-height: var(--line-height-relaxed);
  --type-caption-line-height-fluid: var(--line-height-relaxed);
  --type-caption-letter-spacing: var(--letter-spacing-wide);
  --type-caption-letter-spacing-fluid: var(--letter-spacing-wide);

  --type-caption-strong-font-family: var(--font-body);
  --type-caption-strong-font-weight: var(--font-weight-bold);
  --type-caption-strong-font-size: var(--font-size-xs);
  --type-caption-strong-font-size-fluid: var(--font-size-xs);
  --type-caption-strong-line-height: var(--line-height-relaxed);
  --type-caption-strong-line-height-fluid: var(--line-height-relaxed);
  --type-caption-strong-letter-spacing: var(--letter-spacing-wide);
  --type-caption-strong-letter-spacing-fluid: var(--letter-spacing-wide);

  /* ===== Interactive Element Sizes ===== */
  /* Standard heights for buttons, pills, list items, and other interactive elements */
  --size-standard: 64px;    /* Standard interactive element height (nav buttons, list rows, pills) */
  --size-compact: 56px;     /* Compact variant for mobile or constrained spaces */
  --size-secondary: 48px;   /* Secondary buttons (~75% of standard) */
  --size-medium: 40px;      /* Medium elements (XL buttons, circle buttons) */
  --size-small: 28px;       /* Small elements (pill buttons, tags) */

  /* ===== Rounding & Elevation ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;  /* Pill-shaped buttons */
  --shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.08);

  /* Glass/Frosted effects */
  --glass-bg-light: rgba(235, 235, 235, 0.4);
  --glass-bg-dark: rgba(30, 30, 30, 0.6);
  --glass-border-light: rgba(235, 235, 235, 0.15);
  --glass-border-dark: rgba(45, 45, 45, 0.15);
  --glass-blur: blur(20px);
  --glass-saturate: saturate(180%);

  /* Overlay backgrounds */
  --overlay-light: rgba(255, 255, 255, 0.7);
  --overlay-dark: rgba(0, 0, 0, 0.7);

  /* Interactive state colors */
  --glass-hover-light: rgba(235, 235, 235, 0.7);
  --glass-hover-dark: rgba(45, 45, 45, 0.85);
  --selected-light: rgba(0, 0, 0, 0.75);
  --selected-dark: rgba(255, 255, 255, 0.8);
  --indicator-light: rgba(255, 255, 255, 0.95);
  --indicator-dark: rgba(0, 0, 0, 0.85);
  --scrim-light: rgba(0, 0, 0, 0.5);
  --scrim-dark: rgba(0, 0, 0, 0.3);

  /* Shimmer effect colors - light theme */
  --shimmer-base: rgba(0, 0, 0, 0.04);
  --shimmer-highlight: rgba(0, 0, 0, 0.1);
  /* Shimmer effect colors - dark theme (overridden below) */
  --shimmer-base-dark: rgba(255, 255, 255, 0.05);
  --shimmer-highlight-dark: rgba(255, 255, 255, 0.12);

  /* ===== Spacing ===== */
  --unit: 32px;
  --unit-half: 16px;
  --unit-2x: 64px;
  --unit-3x: 96px;
  --unit-4x: 124px;

  /* Consolidated spacing scale - 4px base grid */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 56px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 96px;

  /* ===== Motion ===== */
  --duration-instant: 100ms;
  --duration-quick: 300ms;
  --duration-fast: 500ms;
  --duration-normal: 800ms;
  --duration-slow: 1000ms;

  /* Semantic duration aliases (set by JS from CONFIG.timing) */
  --duration-theme: var(--duration-fast);

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-apple-carousel: cubic-bezier(0.33, 0, 0.2, 1);

  /* ===== Video Progress Bar ===== */
  --video-progress-height: 2px;
  --video-progress-color: rgba(255, 255, 255, 0.9);
  --video-progress-bg: rgba(255, 255, 255, 0.15);
  --video-progress-duration: 1.4s;
  --video-progress-easing: cubic-bezier(0.4, 0, 0.6, 1);

  /* ===== Layout ===== */
  --z-base: 1;
  --z-elevated: 10;
  --z-focused: 100;
  --z-header: 500;
  --z-sidebar: 1000;
  --z-overlay: 9999;
  --z-debug: 999999;

  --carousel-height: 426.5px;
  --header-height: var(--unit-2x);

  /* ===== Header Dynamic Sizing ===== */
  /* Header expands/collapses based on scroll position in project mode */
  --header-height-expanded: 70px;  /* default/expanded state */
  --header-height-collapsed: 40px; /* scrolled/collapsed state */
  --header-font-size-expanded: 16.5px;        /* 1.5x .t-caption (11px * 1.5) */
  --header-font-size-collapsed: 11px;         /* 1x .t-caption */
  --header-scroll-range: 200px;               /* Pixels to scroll for full transition */

  /* Dynamic values - updated by JavaScript based on scroll */
  --header-height-current: var(--header-height-expanded);
  --header-font-size-current: var(--header-font-size-expanded);

  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1200px;
  --breakpoint-wide: 1440px;

  --min-width-column: 350px;
  --max-width-column: 350px;
  --column-min-width: 200px;
  --max-width-details: 300px;

  --scale-target: 2.4;
  --translate-details-y: 24px;
  --translate-node-initial-y: 10px;

  /* ===== Legacy aliases (kept for inline styles & docs) ===== */
  --bg-primary: var(--surface-primary);
  --bg-secondary: var(--surface-secondary);
  --color-black: var(--color-base-black);
  --color-white: var(--color-base-white);
  --color-dark: var(--color-base-dark);
  --color-light: var(--color-base-light);
  --color-gray: var(--color-base-gray);

  --font-size-xl: var(--font-size-display-xxl);
  --font-size-lg: var(--font-size-display-xl);
  --font-size-mg: var(--font-size-display-lg);
  --font-size-md: var(--font-size-heading-lg);

  --f-display: var(--font-display);
  --f-body: var(--font-body);
  --fs-xl: var(--font-size-display-xxl);
  --fs-lg: var(--font-size-display-xl);
  --fs-md: var(--font-size-heading-lg);
  --fs-sm: var(--font-size-base);
  --t-fast: var(--duration-fast);
  --t-normal: var(--duration-normal);
  --t-slow: var(--duration-slow);
}

[data-theme="dark"] {
  --surface-primary: var(--color-base-black);
  --surface-secondary: var(--color-base-dark);
  --text-primary: var(--color-base-white);
  --text-secondary: var(--color-base-gray);
  --text-tertiary: rgba(255, 255, 255, 0.65);
  --border-color: var(--color-border-dark);
  --bg-primary: var(--surface-primary);
  --bg-secondary: var(--surface-secondary);

  /* Shimmer effect - dark theme */
  --shimmer-base: var(--shimmer-base-dark);
  --shimmer-highlight: var(--shimmer-highlight-dark);

  /* Video progress bar - slightly brighter in dark mode */
  --video-progress-color: rgba(255, 255, 255, 1);
  --video-progress-bg: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1080px) {
  :root {
    --unit: 15px;
    --unit-half: 8px;
    --unit-2x: 30px;
    --unit-3x: 45px;
    --unit-4x: 60px;

    /* Mobile spacing overrides - maintaining 4px base grid */
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
    --spacing-4xl: 60px;

    --column-min-width: 150px;

    /* Header dynamic sizing - mobile adjustments */
    --header-height-expanded: 50px;
    --header-height-collapsed: 36px;
    --header-font-size-expanded: 15px;          /* 1.5x mobile .t-caption (10px * 1.5) */
    --header-font-size-collapsed: 10px;         /* 1x mobile .t-caption */
  }
}