/**
 * DR. STEVE ITOPA - EXECUTIVE DESIGN SYSTEM
 * Design Tokens, Variables & Foundations
 * Palette: Poetic Minimalism & Executive Authority
 */

@layer reset, base, theme, components, utilities;

@layer theme {
  :root {
    /* --- COLOR PALETTE --- */
    /* Primary Deep Executive Tones */
    --color-navy-dark: #07101C;
    --color-navy-base: #0B192C;
    --color-navy-surface: #10233D;
    --color-navy-elevated: #162E50;
    --color-navy-card: rgba(16, 35, 61, 0.7);

    /* Warm Dawn & Sunrise Ochre Accents */
    --color-ochre-light: #E8D5C4;
    --color-ochre-base: #D4A373;
    --color-ochre-warm: #B97A46;
    --color-ochre-deep: #8E5629;
    --color-ochre-glow: rgba(212, 163, 115, 0.25);

    /* Neutral & Text Shades */
    --color-text-primary: #F9F9FB;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #8494A8;
    --color-text-subtle: #4D6076;
    
    /* Editorial Parchment Light (Alternate surface mode) */
    --color-parchment-bg: #F8F7F4;
    --color-parchment-text: #1C232B;
    --color-parchment-border: #E5E1D8;

    /* Semantic & Functional */
    --color-border-subtle: rgba(212, 163, 115, 0.18);
    --color-border-focus: #D4A373;
    --color-success: #2E7D32;
    --color-error: #D32F2F;

    /* --- ATMOSPHERIC LIGHTING & GRADIENTS --- */
    --gradient-sunrise-beam: radial-gradient(
      ellipse 80% 60% at 75% 20%,
      rgba(232, 213, 196, 0.22) 0%,
      rgba(194, 125, 80, 0.16) 35%,
      rgba(15, 42, 74, 0.3) 70%,
      transparent 100%
    );

    --gradient-hero-backlight: radial-gradient(
      circle at 65% 35%,
      rgba(212, 163, 115, 0.2) 0%,
      rgba(11, 25, 44, 0) 65%
    );

    --gradient-card-border: linear-gradient(
      135deg,
      rgba(212, 163, 115, 0.45) 0%,
      rgba(212, 163, 115, 0.05) 50%,
      rgba(255, 255, 255, 0.02) 100%
    );

    --gradient-text-gold: linear-gradient(
      135deg,
      #FFFFFF 20%,
      #E8D5C4 50%,
      #D4A373 100%
    );

    /* --- TYPOGRAPHY FAMILIES --- */
    --font-serif-display: 'Cinzel', 'Playfair Display', Georgia, serif;
    --font-serif-editorial: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;

    /* --- FLUID TYPOGRAPHY SCALE (Modular clamp) --- */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --text-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.625rem);
    --text-2xl: clamp(1.68rem, 1.45rem + 1.15vw, 2.125rem);
    --text-3xl: clamp(2.1rem, 1.75rem + 1.75vw, 2.875rem);
    --text-4xl: clamp(2.65rem, 2.1rem + 2.75vw, 3.85rem);
    --text-display: clamp(3.2rem, 2.5rem + 3.5vw, 5.25rem);

    /* --- LINE HEIGHTS & TRACKING --- */
    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.65;
    --leading-relaxed: 1.8;

    --tracking-tighter: -0.03em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    --tracking-widest: 0.18em;
    --tracking-monogram: 0.28em;

    /* --- FLUID SPACING SYSTEM --- */
    --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
    --space-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --space-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --space-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --space-xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    --space-2xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
    --space-3xl: clamp(4.5rem, 3.5rem + 5vw, 7.5rem);

    /* --- LAYOUT & CONTAINERS --- */
    --container-max: 1320px;
    --container-narrow: 980px;
    --container-prose: 740px;
    --header-height: 84px;

    /* --- ELEVATION & SHADOWS --- */
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 10px 30px -5px rgba(7, 16, 28, 0.6);
    --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 1px rgba(212, 163, 115, 0.3);
    --shadow-hero-image: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 45px rgba(212, 163, 115, 0.15);

    /* --- BORDER RADIUS --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* --- TRANSITIONS & TIMING --- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 650ms;
  }
}