/**
 * Kayla Kamm Studio - Design System Variables
 *
 * This file contains all design tokens for the Archival Modernism aesthetic.
 * Variables are organized by category for maintainability.
 */

:root {
  /* ===============================================
     COLOR PALETTE - Aged Paper & Iron
     =============================================== */

  /* Primary Colors */
  --color-parchment: #F7F3ED;      /* warm off-white, like aged linen - primary background */
  --color-ink: #1A1A1A;             /* deep black, not pure #000 - primary text */
  --color-iron: #4A4A48;            /* aged metal - secondary text, captions */
  --color-rust: #8B4513;            /* warm accent, aged copper/rust - CTAs, accents */
  --color-verdigris: #4A7C6F;       /* oxidized copper green - hover states, highlights */
  --color-bone: #E8E4DC;            /* subtle section dividers, borders */

  /* ===============================================
     TYPOGRAPHY - Font Families
     =============================================== */

  --font-display: 'Cormorant Garamond', Georgia, serif;  /* Elegant serif for headlines */
  --font-body: 'DM Sans', system-ui, sans-serif;         /* Clean sans for body text */
  --font-accent: 'EB Garamond', Georgia, serif;          /* Italic serif for pull quotes */

  /* ===============================================
     TYPOGRAPHY - Scale (Fluid/Responsive)
     =============================================== */

  /* Fluid typography using clamp() for responsive scaling */
  --text-hero: clamp(3rem, 8vw, 6rem);          /* 48px → 96px: Main hero headline */
  --text-h1: clamp(2.5rem, 5vw, 4rem);          /* 40px → 64px: Section headings */
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);       /* 28px → 40px: Subsection headings */
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);       /* 20px → 24px: Card titles */
  --text-body: 1.125rem;                         /* 18px: Body text (fixed) */
  --text-small: 0.875rem;                        /* 14px: Captions, labels */

  /* ===============================================
     SPACING - Layout & Rhythm
     =============================================== */

  /* Vertical spacing (fluid for responsive breathability) */
  --section-padding: clamp(4rem, 10vh, 8rem);    /* Generous section padding */

  /* Grid system */
  --grid-gutter: clamp(1rem, 4vw, 3rem);         /* Responsive gutters: 16px → 48px */
  --max-content-width: 1400px;                   /* Maximum content container width */

  /* Base spacing unit (8px system for vertical rhythm) */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);       /* 8px */
  --space-sm: calc(var(--space-unit) * 2);       /* 16px */
  --space-md: calc(var(--space-unit) * 3);       /* 24px */
  --space-lg: calc(var(--space-unit) * 4);       /* 32px */
  --space-xl: calc(var(--space-unit) * 6);       /* 48px */
  --space-xxl: calc(var(--space-unit) * 8);      /* 64px */

  /* ===============================================
     BREAKPOINTS (for reference in media queries)
     ===============================================
     Use these values in @media queries:
     - Mobile: up to 640px
     - Tablet: 640px to 1023px
     - Desktop: 1024px and above
  */

  /* --bp-sm: 640px;   Mobile → Tablet */
  /* --bp-md: 768px;   Small tablet → Medium tablet */
  /* --bp-lg: 1024px;  Tablet → Desktop */
  /* --bp-xl: 1280px;  Desktop → Large desktop */

  /* ===============================================
     ANIMATION - Timing & Easing
     =============================================== */

  /* Timing functions */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);    /* Standard easing */
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);  /* Ease-out */
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);    /* Ease-in */

  /* Duration */
  --duration-fast: 200ms;       /* Quick interactions (hover, focus) */
  --duration-medium: 300ms;     /* Drawer, menu transitions */
  --duration-slow: 600ms;       /* Page load, scroll animations */
  --duration-slowest: 800ms;    /* Hero animations */

  /* ===============================================
     VISUAL EFFECTS
     =============================================== */

  /* Shadows (subtle, material quality) */
  --shadow-subtle: 0 2px 8px rgba(26, 26, 26, 0.08);
  --shadow-medium: 0 4px 16px rgba(26, 26, 26, 0.12);

  /* Border radius (minimal for period aesthetic) */
  --radius-sharp: 0;
  --radius-subtle: 2px;
  --radius-small: 4px;

  /* Overlays */
  --overlay-dark: rgba(26, 26, 26, 0.4);        /* Dark overlay for hero images */
  --overlay-light: rgba(247, 243, 237, 0.9);    /* Light overlay if needed */

  /* Texture overlay opacity */
  --texture-opacity: 0.08;                       /* Paper grain texture overlay */
  --vignette-opacity: 0.15;                      /* Edge vignette opacity */

  /* ===============================================
     LAYOUT - Z-Index Scale
     =============================================== */

  --z-below: -1;          /* Below normal content (backgrounds) */
  --z-normal: 1;          /* Normal content */
  --z-elevated: 10;       /* Elevated UI (sticky nav) */
  --z-dropdown: 100;      /* Dropdowns, tooltips */
  --z-overlay: 500;       /* Overlays, modals */
  --z-modal: 1000;        /* Modal dialogs */
  --z-toast: 2000;        /* Toast notifications */

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

  /* Focus visible outline */
  --focus-outline: 2px solid var(--color-verdigris);
  --focus-offset: 2px;

  /* Minimum touch target size (for mobile) */
  --touch-target-min: 44px;
}