/* ============================================
   FOLIOBLOX — Design Tokens
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --color-solar-orange: #FF4D00;
  --color-solar-orange-light: #FF6B2C;
  --color-solar-orange-dim: #CC3D00;
  --color-solar-orange-glow: rgba(255, 77, 0, 0.25);
  --color-solar-orange-subtle: rgba(255, 77, 0, 0.08);

  /* ── Surface Colors (Material 3 inspired) ── */
  --color-surface: #000000;
  --color-surface-dim: #0A0A0A;
  --color-surface-bright: #393939;
  --color-surface-container-lowest: #080808;
  --color-surface-container-low: #0E0E0E;
  --color-surface-container: #121212;
  --color-surface-container-high: #1A1A1A;
  --color-surface-container-highest: #242424;

  /* ── On-Surface Colors ── */
  --color-on-surface: #E2E2E2;
  --color-on-surface-variant: #A0A0A0;
  --color-on-surface-muted: #6B6B6B;
  --color-on-surface-faint: #3A3A3A;

  /* ── Extended Palette ── */
  --color-primary: #FFB59E;
  --color-primary-container: #FF571A;
  --color-on-primary: #5E1700;
  --color-secondary: #C8C6C5;
  --color-secondary-container: #474746;
  --color-tertiary: #A5C8FF;
  --color-outline: #AD897E;
  --color-outline-variant: #5C4037;
  --color-error: #FFB4AB;

  /* ── Gradient Presets ── */
  --gradient-hero: linear-gradient(135deg, rgba(255, 77, 0, 0.9) 0%, rgba(255, 77, 0, 0.3) 40%, transparent 70%);
  --gradient-hero-bottom: linear-gradient(to top, #000000 0%, transparent 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(255, 77, 0, 0.06) 0%, transparent 100%);
  --gradient-button-glow: radial-gradient(circle at 50% 50%, rgba(255, 107, 44, 0.6) 0%, rgba(255, 77, 0, 1) 100%);
  --gradient-section-fade: linear-gradient(to bottom, transparent, rgba(255, 77, 0, 0.02) 50%, transparent);

  /* ── Typography — Sora (Headlines) ── */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-headline-xl: 800 clamp(48px, 6vw, 80px)/1.0 var(--font-display);
  --text-headline-xl-ls: -0.04em;

  --text-headline-lg: 700 clamp(32px, 4vw, 48px)/1.1 var(--font-display);
  --text-headline-lg-ls: -0.03em;

  --text-headline-lg-mobile: 700 32px/1.2 var(--font-display);
  --text-headline-lg-mobile-ls: -0.02em;

  --text-headline-md: 600 clamp(20px, 2vw, 24px)/1.3 var(--font-display);
  --text-headline-md-ls: -0.01em;

  --text-headline-sm: 600 clamp(16px, 1.5vw, 18px)/1.4 var(--font-display);
  --text-headline-sm-ls: -0.005em;

  --text-body-lg: 400 18px/1.6 var(--font-body);
  --text-body-md: 400 16px/1.6 var(--font-body);
  --text-body-sm: 400 14px/1.6 var(--font-body);

  --text-label-sm: 600 12px/1 var(--font-body);
  --text-label-sm-ls: 0.05em;

  --text-label-xs: 600 10px/1 var(--font-body);
  --text-label-xs-ls: 0.08em;

  /* ── Border Radius ── */
  --radius-sm: 0.25rem;
  --radius-DEFAULT: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --container-gap: 2rem;
  --bento-gutter: 1rem;
  --page-margin: clamp(1.5rem, 8vw, 10rem);
  --section-padding: clamp(4rem, 8vw, 8rem);

  /* ── Elevation (Tonal Layering) ── */
  --elevation-0: #000000;
  --elevation-1: #121212;
  --elevation-2: #1A1A1A;
  --elevation-3: #242424;
  --elevation-4: #2E2E2E;

  /* ── Animation Timing ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-slowest: 1200ms;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-elevated: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-cursor: 500;
  --z-loader: 1000;

  /* ── Shadows (subtle, for special cases) ── */
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-card-hover: 0 0 0 1px var(--color-solar-orange), 0 8px 32px rgba(255, 77, 0, 0.08);
  --shadow-button-glow: 0 0 20px rgba(255, 77, 0, 0.3), 0 0 60px rgba(255, 77, 0, 0.1);
  --shadow-input-focus: 0 0 0 4px rgba(255, 77, 0, 0.15);
}