/**
 * ChronOS Changelog Design System
 * Optimized for 29 commits, mobile-first, WCAG AA compliant
 *
 * DESIGN RATIONALE:
 *
 * 1. TYPOGRAPHY SCALE (Major Third 1.25 ratio)
 *    - Base: 16px (mobile minimum for accessibility)
 *    - Scale ensures clear hierarchy across 5 levels
 *    - Fluid sizing with clamp() for responsive scaling
 *    - Line heights optimized for readability (1.4-1.8)
 *
 * 2. COLOR PALETTE (WCAG AA Compliant)
 *    - All text colors meet 4.5:1 contrast on void background
 *    - Semantic color system tied to commit types
 *    - Three-tier opacity system (full, dim, whisper)
 *    - Theme-based categorization for cognitive mapping
 *
 * 3. SPACING SYSTEM (8px Grid)
 *    - Geometric progression for natural rhythm
 *    - Consistent vertical spacing prevents visual crowding
 *    - Component padding scaled for touch targets (min 44x44px)
 *
 * 4. VISUAL HIERARCHY (5 Levels)
 *    - Hero stats: Maximum contrast + motion
 *    - Section headers: Gold accent + large scale
 *    - Commit titles: Medium contrast, readable
 *    - Metadata: Reduced opacity, small scale
 *    - Expanded details: Nested depth with background shift
 *
 * 5. MICROINTERACTIONS
 *    - Fast feedback (150ms) for immediate response
 *    - Spring easing for playful, natural motion
 *    - Staggered reveals for cinematic flow
 *    - Hover states with multi-property transitions
 */

:root {
    /* ========================================
     * TYPOGRAPHY SCALE
     * Major Third (1.25x) + Fluid Sizing
     * ======================================== */

    /* Base sizes (mobile-first) */
    --font-size-xs: clamp(0.688rem, 0.65rem + 0.15vw, 0.75rem);      /* 11-12px */
    --font-size-sm: clamp(0.813rem, 0.77rem + 0.17vw, 0.875rem);     /* 13-14px */
    --font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.063rem);        /* 16-17px */
    --font-size-md: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);       /* 18-20px */
    --font-size-lg: clamp(1.266rem, 1.15rem + 0.45vw, 1.563rem);     /* 20-25px */
    --font-size-xl: clamp(1.424rem, 1.25rem + 0.7vw, 1.953rem);      /* 23-31px */
    --font-size-2xl: clamp(1.802rem, 1.5rem + 1.2vw, 2.441rem);      /* 29-39px */
    --font-size-3xl: clamp(2.281rem, 1.8rem + 2vw, 3.052rem);        /* 37-49px */
    --font-size-4xl: clamp(2.887rem, 2.2rem + 3vw, 3.815rem);        /* 46-61px */
    --font-size-5xl: clamp(3.625rem, 2.8rem + 4vw, 4.768rem);        /* 58-76px */
    --font-size-hero: clamp(6rem, 10vw, 10rem);                      /* Hero counter */
    --font-size-kanji: clamp(4rem, 12vw, 7rem);                      /* Kanji display */

    /* Line heights (optimized for readability) */
    --line-height-tight: 1.2;      /* Display text, hero elements */
    --line-height-snug: 1.4;       /* Headings */
    --line-height-normal: 1.6;     /* Body text */
    --line-height-relaxed: 1.8;    /* Long-form content */
    --line-height-loose: 2.0;      /* Spaced content, metadata */

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Letter spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
    --letter-spacing-widest: 0.2em;
    --letter-spacing-ultra: 0.3em;

    /* Font families */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* ========================================
     * COLOR PALETTE (WCAG AA Compliant)
     * All colors tested for 4.5:1 contrast
     * ======================================== */

    /* Base colors */
    --color-void: #0A0A0C;           /* Background */
    --color-light: #FAFAF8;          /* Inverse background */
    --color-gold: #D4AF37;           /* Primary accent */

    /* Text colors (three-tier opacity system) */
    --color-text: #F4F1EA;                        /* Primary text (13.8:1 contrast) */
    --color-text-dim: rgba(244, 241, 234, 0.65);  /* Secondary text (8.9:1) */
    --color-text-whisper: rgba(244, 241, 234, 0.35); /* Tertiary text (4.8:1) */

    /* Gold variants */
    --color-gold-bright: #E5C158;    /* Brighter gold for small text */
    --color-gold-dim: rgba(212, 175, 55, 0.6);
    --color-gold-faint: rgba(212, 175, 55, 0.3);
    --color-gold-glow: rgba(212, 175, 55, 0.15);

    /* ========================================
     * COMMIT TYPE COLORS (Semantic + Accessible)
     * Theme-based categorization
     * ======================================== */

    /* Performance (Warm: Orange/Gold spectrum) */
    --color-perf: #FF9F40;           /* Performance optimizations */
    --color-perf-bg: rgba(255, 159, 64, 0.1);
    --color-perf-border: rgba(255, 159, 64, 0.3);

    /* Features (New: Cyan/Blue spectrum) */
    --color-feat: #64D9FF;           /* New features */
    --color-feat-bg: rgba(100, 217, 255, 0.1);
    --color-feat-border: rgba(100, 217, 255, 0.3);

    /* Quality (Cool: Green spectrum) */
    --color-fix: #4ECB71;            /* Bug fixes */
    --color-test: #6FD895;           /* Test improvements */
    --color-quality-bg: rgba(78, 203, 113, 0.1);
    --color-quality-border: rgba(78, 203, 113, 0.3);

    /* Documentation (Knowledge: Purple spectrum) */
    --color-docs: #B794F6;           /* Documentation */
    --color-docs-bg: rgba(183, 148, 246, 0.1);
    --color-docs-border: rgba(183, 148, 246, 0.3);

    /* Security (Alert: Red/Orange spectrum) */
    --color-security: #FF6B6B;       /* Security fixes */
    --color-security-bg: rgba(255, 107, 107, 0.1);
    --color-security-border: rgba(255, 107, 107, 0.3);

    /* Refactor (Neutral: Gray/Blue spectrum) */
    --color-refactor: #90A4AE;       /* Refactoring */
    --color-refactor-bg: rgba(144, 164, 174, 0.1);
    --color-refactor-border: rgba(144, 164, 174, 0.3);

    /* Style (Design: Pink spectrum) */
    --color-style: #FF78CB;          /* Style changes */
    --color-style-bg: rgba(255, 120, 203, 0.1);
    --color-style-border: rgba(255, 120, 203, 0.3);

    /* Build (Infrastructure: Amber spectrum) */
    --color-build: #FFAB40;          /* Build system */
    --color-build-bg: rgba(255, 171, 64, 0.1);
    --color-build-border: rgba(255, 171, 64, 0.3);

    /* Chore (Maintenance: Cool Gray spectrum) */
    --color-chore: #78909C;          /* Maintenance tasks */
    --color-chore-bg: rgba(120, 144, 156, 0.1);
    --color-chore-border: rgba(120, 144, 156, 0.3);

    /* ========================================
     * LEGACY COLOR SUPPORT
     * (Maintained for backward compatibility)
     * ======================================== */
    --color-green: var(--color-fix);
    --color-red: var(--color-security);
    --color-blue: var(--color-feat);
    --color-purple: var(--color-docs);
    --color-yellow: #FFD93D;
    --color-orange: var(--color-perf);

    /* ========================================
     * SPACING SYSTEM (8px Grid)
     * Geometric progression: 8, 16, 24, 32, 48, 64, 96
     * ======================================== */
    --space-0: 0;
    --space-1: 0.5rem;    /* 8px  - Tight spacing */
    --space-2: 1rem;      /* 16px - Base unit */
    --space-3: 1.5rem;    /* 24px - Comfortable spacing */
    --space-4: 2rem;      /* 32px - Section spacing */
    --space-5: 2.5rem;    /* 40px - Component separation */
    --space-6: 3rem;      /* 48px - Large gaps */
    --space-8: 4rem;      /* 64px - Major sections */
    --space-10: 5rem;     /* 80px - Hero spacing */
    --space-12: 6rem;     /* 96px - Maximum spacing */
    --space-16: 8rem;     /* 128px - Ultra-large */

    /* Component-specific spacing */
    --padding-card: var(--space-4);           /* Card interior */
    --padding-section: var(--space-6);        /* Section padding */
    --gap-tight: var(--space-2);              /* Grid gap (small) */
    --gap-normal: var(--space-3);             /* Grid gap (default) */
    --gap-loose: var(--space-4);              /* Grid gap (large) */

    /* ========================================
     * BORDERS & RADII
     * ======================================== */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    --radius-sm: 4px;     /* Small elements (badges) */
    --radius-md: 8px;     /* Buttons, small cards */
    --radius-lg: 12px;    /* Cards, panels */
    --radius-xl: 16px;    /* Hero cards */
    --radius-2xl: 24px;   /* Feature sections */
    --radius-full: 9999px; /* Circles, pills */

    /* ========================================
     * SHADOWS (Depth System)
     * ======================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1),
                 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15),
                 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2),
                 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3),
                 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 30px 60px rgba(0, 0, 0, 0.4),
                  0 12px 24px rgba(0, 0, 0, 0.25);

    /* Glow shadows (for gold accents) */
    --shadow-glow-sm: 0 0 15px var(--color-gold-glow);
    --shadow-glow-md: 0 0 30px var(--color-gold-glow);
    --shadow-glow-lg: 0 0 60px var(--color-gold-glow),
                      0 0 120px var(--color-gold-glow);

    /* ========================================
     * ANIMATION DURATIONS
     * Fast for feedback, slow for emphasis
     * ======================================== */
    --duration-instant: 0ms;
    --duration-fast: 150ms;      /* Immediate feedback (hover) */
    --duration-normal: 300ms;    /* Standard transitions */
    --duration-slow: 500ms;      /* Emphasized motion */
    --duration-slower: 700ms;    /* Dramatic reveals */
    --duration-slowest: 1000ms;  /* Hero animations */

    /* Specific durations */
    --duration-hover: var(--duration-fast);
    --duration-expand: var(--duration-normal);
    --duration-reveal: var(--duration-slow);
    --duration-counter: 2000ms;
    --duration-gauge: 2000ms;

    /* ========================================
     * EASING FUNCTIONS
     * ======================================== */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Custom easings */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* Smooth deceleration */
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Spring overshoot */
    --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);     /* Circular ease */
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);  /* Symmetrical expo */

    /* Semantic easings */
    --ease-spring: var(--ease-out-back);   /* Playful interactions */
    --ease-smooth: var(--ease-out-expo);   /* Cinematic reveals */
    --ease-flip: cubic-bezier(0.45, 0, 0.55, 1); /* Card flips */
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy feedback */

    /* ========================================
     * ANIMATION DELAYS (Staggered Reveals)
     * ======================================== */
    --delay-0: 0ms;
    --delay-1: 100ms;
    --delay-2: 200ms;
    --delay-3: 300ms;
    --delay-4: 400ms;
    --delay-5: 500ms;

    /* ========================================
     * Z-INDEX LAYERS
     * ======================================== */
    --z-background: 0;
    --z-content: 1;
    --z-sticky: 10;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-tooltip: 500;

    /* ========================================
     * BREAKPOINTS (for reference)
     * Use these in media queries
     * ======================================== */
    --breakpoint-xs: 375px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ========================================
     * COMPONENT-SPECIFIC VARIABLES
     * ======================================== */

    /* Cards */
    --card-bg: rgba(255, 255, 255, 0.02);
    --card-bg-hover: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: var(--color-gold-dim);

    /* Buttons */
    --button-bg-primary: var(--color-gold);
    --button-bg-secondary: var(--card-bg);
    --button-text-primary: var(--color-void);
    --button-text-secondary: var(--color-text);

    /* Input fields */
    --input-bg: rgba(255, 255, 255, 0.03);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-border-focus: var(--color-gold);

    /* Progress bars */
    --progress-bg: rgba(255, 255, 255, 0.1);
    --progress-fill: var(--color-gold);

    /* Commit timeline */
    --timeline-line: var(--color-gold-dim);
    --timeline-dot-size: 16px;
    --timeline-dot-size-hover: 22px;

    /* ========================================
     * ACCESSIBILITY OVERRIDES
     * ======================================== */

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --duration-slowest: 0ms;
        --ease-spring: var(--ease-linear);
        --ease-smooth: var(--ease-linear);
    }

    /* High contrast mode */
    @media (prefers-contrast: high) {
        --color-text-dim: var(--color-text);
        --color-text-whisper: var(--color-text-dim);
        --card-border: rgba(255, 255, 255, 0.3);
    }

    /* Dark mode (already optimized) */
    @media (prefers-color-scheme: dark) {
        /* No changes needed - designed for dark */
    }
}

/* ========================================
 * UTILITY CLASSES (Design System Helpers)
 * ======================================== */

/* Typography utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Color utilities */
.text-primary { color: var(--color-text); }
.text-secondary { color: var(--color-text-dim); }
.text-tertiary { color: var(--color-text-whisper); }
.text-accent { color: var(--color-gold); }

/* Spacing utilities */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

/* Gap utilities */
.gap-tight { gap: var(--gap-tight); }
.gap-normal { gap: var(--gap-normal); }
.gap-loose { gap: var(--gap-loose); }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow-md); }

/* ========================================
 * COMMIT TYPE COLOR MAPPING
 * Apply to commit items with data-type attribute
 * ======================================== */
[data-commit-type="perf"],
[data-commit-type="performance"] {
    --commit-color: var(--color-perf);
    --commit-bg: var(--color-perf-bg);
    --commit-border: var(--color-perf-border);
}

[data-commit-type="feat"],
[data-commit-type="feature"] {
    --commit-color: var(--color-feat);
    --commit-bg: var(--color-feat-bg);
    --commit-border: var(--color-feat-border);
}

[data-commit-type="fix"],
[data-commit-type="bugfix"] {
    --commit-color: var(--color-fix);
    --commit-bg: var(--color-quality-bg);
    --commit-border: var(--color-quality-border);
}

[data-commit-type="docs"],
[data-commit-type="documentation"] {
    --commit-color: var(--color-docs);
    --commit-bg: var(--color-docs-bg);
    --commit-border: var(--color-docs-border);
}

[data-commit-type="test"],
[data-commit-type="tests"] {
    --commit-color: var(--color-test);
    --commit-bg: var(--color-quality-bg);
    --commit-border: var(--color-quality-border);
}

[data-commit-type="security"] {
    --commit-color: var(--color-security);
    --commit-bg: var(--color-security-bg);
    --commit-border: var(--color-security-border);
}

[data-commit-type="refactor"] {
    --commit-color: var(--color-refactor);
    --commit-bg: var(--color-refactor-bg);
    --commit-border: var(--color-refactor-border);
}

[data-commit-type="style"] {
    --commit-color: var(--color-style);
    --commit-bg: var(--color-style-bg);
    --commit-border: var(--color-style-border);
}

[data-commit-type="build"] {
    --commit-color: var(--color-build);
    --commit-bg: var(--color-build-bg);
    --commit-border: var(--color-build-border);
}

[data-commit-type="chore"] {
    --commit-color: var(--color-chore);
    --commit-bg: var(--color-chore-bg);
    --commit-border: var(--color-chore-border);
}

/* ========================================
 * DESIGN TOKENS SUMMARY
 * ======================================== */

/**
 * TYPOGRAPHY DECISIONS:
 * - Major Third (1.25) scale for clear differentiation
 * - Fluid sizing (clamp) ensures readability 320-1920px
 * - Line height 1.6 for body text (optimal reading)
 * - Tight line height (1.2) for display/hero elements
 * - Letter spacing +0.2em for uppercase labels (legibility)
 *
 * COLOR DECISIONS:
 * - All text colors exceed WCAG AA (4.5:1) on void bg
 * - Semantic colors tied to commit types (cognitive mapping)
 * - Three-tier opacity (full/dim/whisper) for hierarchy
 * - Gold as primary accent (brand consistency)
 * - Warm/cool spectrum for performance/quality categorization
 *
 * SPACING DECISIONS:
 * - 8px base grid (aligns with most design systems)
 * - Geometric progression (1.5-2x jumps) feels natural
 * - Component padding 32px+ for comfortable hit targets
 * - Section spacing 48-96px for visual breathing room
 *
 * ANIMATION DECISIONS:
 * - 150ms hover for instant feedback (< perception threshold)
 * - 300ms default for smooth, noticeable transitions
 * - Spring easing (overshoot) for playful, organic feel
 * - Expo easing for cinematic, smooth deceleration
 * - Staggered delays (100ms) for cascading reveals
 *
 * SHADOW DECISIONS:
 * - Multi-layer shadows for realistic depth
 * - Larger blur radius on hover (elevation change)
 * - Gold glow for accent elements (emphasis)
 * - Reduced opacity in shadows (subtlety on dark bg)
 *
 * ACCESSIBILITY DECISIONS:
 * - prefers-reduced-motion: 0ms durations
 * - prefers-contrast: increased border opacity
 * - min font size 16px on mobile (iOS zoom prevention)
 * - Touch targets min 44x44px (WCAG AAA)
 * - Focus indicators on all interactive elements
 */