/* ============================================
   TOKENS.CSS - Design System Variables
   Editorial × Industrial Design System
   ============================================ */

:root {
  /* Color Palette - Editorial Industrial */
  --color-ink: #0a0a0a;
  --color-stone: #1a1a1a;
  --color-graphite: #2d2d2d;
  --color-steel: #4a4a4a;
  --color-fog: #8a8a8a;
  --color-cloud: #c5c5c5;
  --color-paper: #f5f5f3;
  --color-white: #ffffff;
  
  /* Accent Colors */
  --color-rust: #d45d42;
  --color-rust-dark: #b84a33;
  --color-ochre: #e6a547;
  --color-sage: #8a9a7b;
  --color-indigo: #4a5e7a;
  
  /* Semantic Colors */
  --color-primary: var(--color-rust);
  --color-primary-hover: var(--color-rust-dark);
  --color-secondary: var(--color-indigo);
  --color-accent: var(--color-ochre);
  
  /* Background Layers */
  --bg-base: var(--color-paper);
  --bg-surface: var(--color-white);
  --bg-elevated: var(--color-white);
  --bg-dark: var(--color-ink);
  
  /* Text Hierarchy */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-steel);
  --text-tertiary: var(--color-fog);
  --text-inverse: var(--color-white);
  
  /* Borders & Lines */
  --border-light: rgba(42, 42, 42, 0.08);
  --border-medium: rgba(42, 42, 42, 0.15);
  --border-heavy: rgba(42, 42, 42, 0.25);
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  
  /* Animation Timings */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  
  /* Easing Functions */
  --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);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
  
  /* Editorial Grid */
  --grid-gap: 1.5rem;
  --grid-margin: 1.5rem;
  --max-width: 1440px;
  --content-width: 1200px;
  
  /* Z-Index Scale */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-fixed: 500;
  --z-overlay: 1000;
  --z-modal: 2000;
}

/* ============================================
   NOISE OVERLAY UTILITY
   ============================================ */

.noise-overlay {
  position: relative;
  overflow: hidden;
}

.noise-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.035;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Dark variant */
.noise-overlay-dark::before {
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* ============================================
   EDITORIAL LINE MARKERS
   ============================================ */

.editorial-lines {
  position: relative;
}

.editorial-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--border-light);
  z-index: 0;
}

.editorial-lines::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: var(--border-light);
  z-index: 0;
}

/* Horizontal variant */
.editorial-lines-h::before {
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}

.editorial-lines-h::after {
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
}

/* ============================================
   GRAIN TEXTURE
   ============================================ */

.grain-texture {
  position: relative;
  background-color: var(--bg-base);
}

.grain-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.045;
  pointer-events: none;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  z-index: 1;
}

/* ============================================
   SCROLL REVEAL UTILITIES
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 100ms;
}

.reveal-delay-2 {
  transition-delay: 200ms;
}

.reveal-delay-3 {
  transition-delay: 300ms;
}

.reveal-delay-4 {
  transition-delay: 400ms;
}

/* ============================================
   FOCUS STATES
   ============================================ */

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}