/* ── Block Design Variables — v3 (Open Design System) ── */
/* Design tokens power every block. Blocks reference CSS variables,
   not hardcoded values. This ensures cross-block consistency.
   
   Mapping:
     --color-*        → colors
     --typo-*         → typography scale (headline, body, etc.)
     --spacing-*      → spacing scale (section, block, element, etc.)
     --weight-*       → font weight, border width, opacity
     --radius-*       → border radius
     --font-*         → font family, weight fallbacks
     --resp-*         → responsive tokens (breakpoints, grid)
*/

:root {
  /* ── Font ── */
  --font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-label: 600;

  /* ── Color Tokens ── */
  --color-base: #030406;
  --color-surface: #070a10;
  --color-raised: #0b0d12;
  --color-accent: #7B4DFF;
  --color-accent-hover: #9C6BFF;
  --color-accent-tint: rgba(123, 77, 255, 0.08);
  --color-text-primary: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.55);
  --color-text-muted: rgba(255, 255, 255, 0.25);
  --color-border: rgba(123, 77, 255, 0.10);
  --color-border-subtle: rgba(123, 77, 255, 0.06);
  --color-status-green: #3ae878;
  --color-status-red: #ff5a6e;

  /* ── Typography Scale (headline) ── */
  --typo-headline-size: 48px;
  --typo-headline-line-height: 1.1;
  --typo-headline-letter-spacing: -0.02em;
  --weight-headline-weight: 700;

  /* ── Typography Scale (body) ── */
  --typo-body-size: 16px;
  --typo-body-line-height: 1.7;
  --weight-body-opacity: 0.75;

  /* ── Typography Scale (measure / container) ── */
  --typo-measure: 68ch;

  /* ── Spacing Scale ── */
  --spacing-section-padding: 80px;
  --spacing-block-gap: 40px;
  --spacing-element-gap: 12px;
  --spacing-card-padding: 24px;
  --spacing-content-max-width: 1200px;
  --spacing-text-max-width: 680px;
  --spacing-page: 24px;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Border / Surface ── */
  --weight-border-width: 1px;
  --weight-border-opacity: 0.10;
  --weight-surface-opacity: 0.6;

  /* ── Responsive Fallbacks ── */
  --resp-grid-min: 260px;
  --resp-grid-gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   2026 DESIGN UPGRADE — Fluid Typography, Depth, Motion
   All additive. These variables are consumed by block templates via
   var() references. No changes to existing variables above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fluid Type Scale (5) ── */
:root {
  --typo-h1-size: clamp(2rem, 5vw + 1rem, 4rem);
  --typo-h1-weight: 700;
  --typo-h1-leading: 1.05;
  --typo-h1-tracking: -0.03em;

  --typo-h2-size: clamp(1.25rem, 3vw + 0.5rem, 2rem);
  --typo-h2-weight: 600;
  --typo-h2-leading: 1.2;

  --typo-h3-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  --typo-h3-weight: 600;

  --typo-body-size: clamp(0.875rem, 0.75vw + 0.75rem, 1.0625rem);
  --typo-body-leading: 1.65;

  --typo-small-size: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem);
}

/* ── Depth & Glass Tokens (derived from 9-value OD palette via color-mix) ── */
:root {
  --depth-shadow-sm: 0 1px 3px color-mix(in oklch, var(--color-base) 30%, transparent);
  --depth-shadow-md: 0 4px 12px color-mix(in oklch, var(--color-base) 20%, transparent);
  --depth-shadow-lg: 0 12px 40px color-mix(in oklch, var(--color-base) 15%, transparent);

  --depth-glass-bg: color-mix(in oklch, var(--color-surface) 60%, transparent);
  --depth-glass-border: color-mix(in oklch, var(--color-border) 50%, transparent);
  --depth-glass-blur: 12px;

  --depth-accent-glow: 0 0 20px color-mix(in oklch, var(--color-accent) 25%, transparent);
  --depth-surface-grad: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    color-mix(in oklch, var(--color-surface) 90%, var(--color-accent)) 100%
  );

  --depth-bleed-width: 100vw;
  --depth-bleed-offset: calc(-1 * (var(--depth-bleed-width) - min(var(--depth-bleed-width), 1200px)) / 2);
}

/* ── Motion & Transition Tokens ── */
:root {
  --motion-entrance-duration: 0.6s;
  --motion-entrance-delay: 0.15s;
  --motion-entrance-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-hover-duration: 0.2s;
  --motion-hover-easing: ease;
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Entrance Animation Keyframes ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Reveal Classes (toggled by IntersectionObserver) ── */
.reveal { opacity: 0; }
.reveal.visible {
  animation: fade-up var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-scale.visible {
  animation: scale-in var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-left.visible {
  animation: slide-left var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-right.visible {
  animation: slide-right var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}

/* Staggered delay for children */
.reveal:nth-child(1) { animation-delay: 0s; }
.reveal:nth-child(2) { animation-delay: 0.1s; }
.reveal:nth-child(3) { animation-delay: 0.2s; }
.reveal:nth-child(4) { animation-delay: 0.3s; }
.reveal:nth-child(5) { animation-delay: 0.4s; }
.reveal:nth-child(6) { animation-delay: 0.5s; }