/**
 * Design System: Default (demo-tokens.css)
 *
 * This file is the single source of truth for the design system labeled "Default".
 * When activeDesignSystemId is "1" (Payload "Default") or "demo", the app loads this file.
 * Payload-style default: black/white with blue for secondary interactions and clear feedback colors.
 * Use as a neutral base to infuse brand color into.
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     BRAND COLORS (Payload-style: blue primary, neutral secondary)
     ═══════════════════════════════════════════════════════════════════════════ */
  
  /* Primary: Blue for links, primary buttons, focus (Payload-style) */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  
  /* Secondary: Neutral gray for secondary buttons and borders */
  --color-secondary-50: #f9fafb;
  --color-secondary-100: #f3f4f6;
  --color-secondary-200: #e5e7eb;
  --color-secondary-300: #d1d5db;
  --color-secondary-400: #9ca3af;
  --color-secondary-500: #6b7280;
  --color-secondary-600: #4b5563;
  --color-secondary-700: #374151;
  --color-secondary-800: #1f2937;
  --color-secondary-900: #111827;
  
  /* Semantic Color Aliases */
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-active: var(--color-primary-700);
  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);
  
  /* Feedback colors (clear, accessible) */
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-info: var(--color-primary-500);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     NEUTRAL COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --color-white: #ffffff;
  --color-black: #000000;
  
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  
  /* Semantic Neutrals */
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);
  --color-surface-elevated: var(--color-white);
  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-surface-dark: #1e293b;
  --color-border-inverse: rgba(255, 255, 255, 0.1);
  --color-muted: var(--color-text-muted);
  
  /* Page body background (body element / .page-layout): solid, gradient, and noise */
  --page-bg-base: var(--color-background);
  --page-bg-gradient: none;
  --page-bg-noise: 0;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════════ */
  
  /* Font Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', ui-serif, serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  
  /* Font Sizes */
  --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;
  
  /* Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     HEADING STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --h1-font-family: var(--font-heading);
  --h1-font-size: var(--text-6xl);
  --h1-font-weight: var(--font-bold);
  --h1-line-height: var(--leading-tight);
  --h1-letter-spacing: var(--tracking-tight);
  --h1-color: var(--color-text);
  --h1-margin-bottom: 1rem;
  
  --h2-font-family: var(--font-heading);
  --h2-font-size: var(--text-4xl);
  --h2-font-weight: var(--font-bold);
  --h2-line-height: var(--leading-tight);
  --h2-letter-spacing: var(--tracking-tight);
  --h2-color: var(--color-text);
  --h2-margin-bottom: 0.75rem;
  
  --h3-font-family: var(--font-heading);
  --h3-font-size: var(--text-2xl);
  --h3-font-weight: var(--font-semibold);
  --h3-line-height: var(--leading-snug);
  --h3-letter-spacing: var(--tracking-normal);
  --h3-color: var(--color-text);
  --h3-margin-bottom: 0.5rem;
  
  --h4-font-family: var(--font-heading);
  --h4-font-size: var(--text-xl);
  --h4-font-weight: var(--font-semibold);
  --h4-line-height: var(--leading-snug);
  --h4-color: var(--color-text);
  
  --h5-font-family: var(--font-heading);
  --h5-font-size: var(--text-lg);
  --h5-font-weight: var(--font-semibold);
  --h5-line-height: var(--leading-normal);
  --h5-color: var(--color-text);
  
  --h6-font-family: var(--font-heading);
  --h6-font-size: var(--text-base);
  --h6-font-weight: var(--font-semibold);
  --h6-line-height: var(--leading-normal);
  --h6-color: var(--color-text);
  
  /* Body Text */
  --body-font-family: var(--font-body);
  --body-font-size: var(--text-base);
  --body-font-weight: var(--font-normal);
  --body-line-height: var(--leading-relaxed);
  --body-color: var(--color-text);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  
  /* Semantic Spacing */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --space-4xl: var(--space-24);
  
  /* Section Spacing */
  --section-padding-y: var(--space-16);
  --section-padding-x: var(--space-6);

  /* Layout Max Widths */
  --max-width-xl: 1280px;
  --max-width-2xl: 1536px;

  /* Footer / Nav Component Tokens */
  --footer-col-min-width: 140px;
  --footer-logo-width: 180px;
  --footer-logo-opacity: 0.7;
  --nav-sub-min-width: 10rem;
  --hero-min-height: 20rem;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     BORDERS & RADIUS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
  
  --border-width: 1px;
  --border-width-2: 2px;
  --border-color: var(--color-border);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 500ms;
  
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --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);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - BUTTONS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --btn-font-family: var(--font-body);
  --btn-font-size: var(--text-base);
  --btn-font-weight: var(--font-semibold);
  --btn-line-height: var(--leading-normal);
  --btn-border-radius: var(--radius-lg);
  --btn-padding-y: var(--space-3);
  --btn-padding-x: var(--space-8);
  --btn-transition: all var(--transition-fast) var(--ease-default);
  
  --btn-primary-bg: var(--color-primary);
  --btn-primary-color: var(--color-text-inverse);
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: var(--color-primary-hover);
  --btn-primary-hover-color: var(--color-text-inverse);
  
  --btn-secondary-bg: var(--color-white);
  --btn-secondary-color: var(--color-primary);
  --btn-secondary-border: var(--color-primary);
  --btn-secondary-hover-bg: var(--color-primary-50);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - HERO BLOCK
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --hero-bg: var(--color-gray-900);
  --hero-bg-color: var(--color-gray-900);
  --hero-text-color: var(--color-text-inverse);
  --hero-padding-y: var(--space-20);
  --hero-padding-x: var(--space-8);
  --hero-text-align: center;
  --hero-max-width: 56rem;
  
  --hero-headline-font-size: var(--text-6xl);
  --hero-headline-font-weight: var(--font-bold);
  --hero-headline-margin-bottom: var(--space-4);
  
  --hero-subhead-font-size: var(--text-xl);
  --hero-subhead-opacity: 0.9;
  --hero-subhead-margin-bottom: var(--space-8);
  
  /* Golden Hero – same as hero by default; design system can override for drastic effect */
  --golden-hero-bg: var(--color-gray-900);
  --golden-hero-text-color: var(--color-text-inverse);
  --golden-hero-padding-y: var(--space-20);
  --golden-hero-padding-x: var(--space-8);
  --golden-hero-text-align: center;
  --golden-hero-max-width: 56rem;
  --golden-hero-headline-font-size: var(--text-6xl);
  --golden-hero-headline-font-weight: var(--font-bold);
  --golden-hero-headline-margin-bottom: var(--space-4);
  --golden-hero-subhead-font-size: var(--text-xl);
  --golden-hero-subhead-opacity: 0.9;
  --golden-hero-subhead-margin-bottom: var(--space-8);
  /* Hero CTA: never white-on-white; primary = solid light bg + dark text, secondary = outline + light text */
  --golden-hero-cta-primary-bg: var(--color-white);
  --golden-hero-cta-primary-color: var(--color-primary-700);
  --golden-hero-cta-primary-hover-bg: var(--color-gray-50);
  --golden-hero-cta-secondary-bg: transparent;
  --golden-hero-cta-secondary-color: var(--color-text-inverse);
  --golden-hero-cta-secondary-hover-bg: rgba(255, 255, 255, 0.15);

  /* Social Hero block – blocks.css .social-hero-block uses these */
  --social-hero-bg: var(--color-background);
  --social-hero-text-color: var(--color-text);
  --social-hero-padding-y: var(--space-20);
  --social-hero-padding-x: var(--space-16);
  --social-hero-gap: var(--space-8);
  --social-hero-min-height: 25rem;
  --social-hero-text-gap: var(--space-8);
  --social-hero-title-gap: var(--space-4);
  --social-hero-eyebrow-color: var(--color-primary);
  --social-hero-eyebrow-font-size: var(--text-sm);
  --social-hero-eyebrow-font-weight: var(--font-semibold);
  --social-hero-headline-color: var(--h1-color);
  --social-hero-headline-font-size: var(--h1-font-size);
  --social-hero-headline-font-weight: var(--h1-font-weight);
  --social-hero-supporting-color: var(--color-text-muted);
  --social-hero-supporting-font-size: var(--text-lg);
  --social-hero-supporting-max-width: 42rem;
  --social-hero-graphic-min-height: 22.5rem;
  --social-hero-graphic-max-width: 790px;
  --social-hero-ellipse-bg: var(--color-primary);
  --social-hero-ellipse-size: 20rem;
  --social-hero-img-object-position: bottom;
  --social-hero-padding-y-mobile: var(--space-10);
  --social-hero-padding-x-mobile: var(--space-6);
  --social-hero-cta-bg: var(--color-black);
  --social-hero-cta-color: var(--color-white);
  --social-hero-cta-hover-bg: var(--color-gray-800);

  /* What we do block – list of cards (Figma Services Block 38) */
  --what-we-do-bg: var(--color-background);
  --what-we-do-padding-y: var(--space-20);
  --what-we-do-padding-x: var(--space-16);
  --what-we-do-gap: var(--space-16);
  --what-we-do-header-gap: var(--space-4);
  --what-we-do-eyebrow-bg: var(--color-primary-50);
  --what-we-do-eyebrow-color: var(--color-primary);
  --what-we-do-eyebrow-font-size: var(--text-sm);
  --what-we-do-heading-font-size: var(--text-3xl);
  --what-we-do-subheading-font-size: var(--text-lg);
  --what-we-do-subheading-max-width: 650px;
  --what-we-do-list-gap: var(--space-8);
  --what-we-do-card-bg: var(--color-surface);
  --what-we-do-card-border: var(--color-border);
  --what-we-do-card-padding: var(--space-8);
  --what-we-do-card-gap: var(--space-8);
  --what-we-do-icon-size: 2rem;
  --what-we-do-title-font-size: var(--text-xl);
  --what-we-do-desc-font-size: var(--text-base);
  --what-we-do-img-width: 236px;
  --what-we-do-img-mobile-min-height: 12rem;

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - POWER HERO
     ═══════════════════════════════════════════════════════════════════════════ */

  --font-power-hero: 'League Gothic', sans-serif;
  --typography-h1-power-hero-font-size: 10.25rem; /* 164px – big hero headline */
  --typography-h1-power-hero-font-family: var(--font-power-hero);
  --typography-h1-power-hero-font-weight: 400;
  --typography-h1-power-hero-line-height: 0.95;
  --typography-h1-power-hero-letter-spacing: -0.02em;
  --typography-h1-power-hero-text-transform: uppercase;
  /* Dummy: full-bleed dark gradient + central blue glow (replace via backgroundImageUrl) */
  --power-hero-bg-base: rgba(15, 23, 42, 0.95);
  --power-hero-bg-dummy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='55%25' r='45%25'%3E%3Cstop offset='0%25' stop-color='rgba(59,130,246,0.35)'/%3E%3Cstop offset='60%25' stop-color='rgba(59,130,246,0.08)'/%3E%3Cstop offset='100%25' stop-color='transparent'/%3E%3C/radialGradient%3E%3ClinearGradient id='bg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230f172a'/%3E%3Cstop offset='35%25' stop-color='%23134e4a'/%3E%3Cstop offset='65%25' stop-color='%231e293b'/%3E%3Cstop offset='100%25' stop-color='%230f172a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23bg)'/%3E%3Cellipse cx='50%25' cy='50%25' rx='45%25' ry='40%25' fill='url(%23g)'/%3E%3C/svg%3E");
  --power-hero-bg-gradient: linear-gradient(90deg, rgba(15,23,42,0.46) 0%, rgba(19,78,74,0.375) 30%, rgba(30,41,59,0.46) 60%, rgba(15,23,42,0.46) 100%);
  --power-hero-bg-blur: 0px;
  --power-hero-bg-noise: 0.02;
  --power-hero-eyebrow-font-size: var(--text-sm);
  --power-hero-eyebrow-font-weight: var(--font-medium);
  --power-hero-eyebrow-letter-spacing: var(--tracking-widest);
  --power-hero-eyebrow-text-transform: uppercase;
  --power-hero-eyebrow-color: var(--color-text-inverse);
  --power-hero-sidebar-heading-font-size: var(--text-sm);
  --power-hero-sidebar-heading-font-weight: var(--font-semibold);
  --power-hero-sidebar-heading-letter-spacing: var(--tracking-widest);
  --power-hero-sidebar-heading-text-transform: uppercase;
  --power-hero-sidebar-heading-color: var(--color-text-inverse);
  --power-hero-article-kicker-font-size: var(--text-xs);
  --power-hero-article-kicker-color: rgba(255, 255, 255, 0.7);
  --power-hero-article-title-font-size: var(--text-base);
  --power-hero-article-title-font-weight: var(--font-medium);
  --power-hero-article-title-color: var(--color-text-inverse);
  --power-hero-cta-bg: transparent;
  --power-hero-cta-color: var(--color-text-inverse);
  --power-hero-cta-border: 2px solid var(--color-text-inverse);
  --power-hero-cta-hover-bg: rgba(255, 255, 255, 0.1);
  --power-hero-cursor-trail-color: rgba(59, 130, 246, 0.6);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - POWER HERO SPLIT (simple 2-col, half size, stackable)
     ═══════════════════════════════════════════════════════════════════════════ */

  /* H2 variant: League Gothic, 80px / 5rem */
  --typography-h2-power-hero-split-font-size: 5rem;
  --typography-h2-power-hero-split-font-family: var(--font-power-hero);
  --typography-h2-power-hero-split-font-weight: 400;
  --typography-h2-power-hero-split-line-height: 0.95;
  --typography-h2-power-hero-split-letter-spacing: -0.02em;
  --typography-h2-power-hero-split-text-transform: uppercase;

  --power-hero-split-bg-base: rgba(15, 23, 42, 0.95);
  --power-hero-split-bg-dummy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='384' viewBox='0 0 768 384'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230f172a'/%3E%3Cstop offset='50%25' stop-color='%23134e4a'/%3E%3Cstop offset='100%25' stop-color='%230f172a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23bg)'/%3E%3C/svg%3E");
  --power-hero-split-bg-gradient: linear-gradient(90deg, rgba(15,23,42,0.46) 0%, rgba(19,78,74,0.375) 30%, rgba(30,41,59,0.46) 60%, rgba(15,23,42,0.46) 100%);
  --power-hero-split-bg-blur: 0px;
  --power-hero-split-bg-noise: 0.02;

  /* Power Hero Four Col – surfer blue block, dark blue text */
  /* Power Hero Four Col – default white bg, black text; surfer blue available as design token */
  --color-surfer-blue: #0077B6;
  --color-surfer-blue-dark: #004d73;
  /* Block background tokens – use for hero, CTA, stats, feature grid, etc. */
  --section-bg-surfer-blue: var(--color-surfer-blue);
  --section-bg-surfer-blue-dark: var(--color-surfer-blue-dark);
  --power-hero-four-col-bg: var(--color-white);
  --power-hero-four-col-text: var(--color-black);
  --power-hero-four-col-number: var(--color-surfer-blue);
  --power-hero-four-col-border: var(--color-border);
  --power-hero-four-col-placeholder-bg: var(--color-gray-100);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - CTA BLOCK
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --cta-bg: var(--color-primary);
  --cta-text-color: var(--color-text-inverse);
  --cta-padding-y: var(--space-16);
  --cta-padding-x: var(--space-8);
  --cta-text-align: center;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - FEATURE GRID
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --feature-grid-bg: transparent;
  --feature-grid-padding-y: var(--space-16);
  --feature-grid-padding-x: var(--space-8);
  --feature-grid-gap: var(--space-8);
  --feature-grid-columns: 3;
  
  --feature-card-bg: var(--color-surface);
  --feature-card-padding: var(--space-6);
  --feature-card-border-radius: var(--radius-xl);
  --feature-card-shadow: var(--shadow-sm);
  
  --feature-icon-size: var(--text-4xl);
  --feature-icon-margin-bottom: var(--space-4);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - STATS BLOCK
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --stats-bg: var(--color-surface);
  --stats-padding-y: var(--space-12);
  --stats-padding-x: var(--space-8);
  --stats-gap: var(--space-16);
  
  --stat-value-font-size: var(--text-4xl);
  --stat-value-font-weight: var(--font-bold);
  --stat-value-color: var(--color-text);
  
  --stat-label-font-size: var(--text-base);
  --stat-label-color: var(--color-text-muted);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - FAT LIST BLOCK (power-hero headline font, blue hover)
     Accessible: white/light text on dark bg; hover = primary blue + white text.
     ═══════════════════════════════════════════════════════════════════════════ */
  --fat-list-bg: var(--color-black);
  --fat-list-text: var(--color-gray-200);
  --fat-list-hover-bg: var(--color-primary-600);
  --fat-list-hover-text: var(--color-white);
  --fat-list-label-font-family: var(--typography-h1-power-hero-font-family);
  --fat-list-label-font-size: clamp(2rem, 5vw, 4rem);
  --fat-list-label-font-weight: var(--typography-h1-power-hero-font-weight);
  --fat-list-label-letter-spacing: var(--typography-h1-power-hero-letter-spacing);
  --fat-list-label-text-transform: var(--typography-h1-power-hero-text-transform);
  --fat-list-subtext-font-size: var(--text-base);
  --fat-list-subtext-color: var(--color-gray-300);
  --fat-list-divider: rgba(255, 255, 255, 0.12);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - TESTIMONIALS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --testimonials-bg: var(--color-surface);
  --testimonials-padding-y: var(--space-16);
  --testimonials-padding-x: var(--space-8);
  
  --testimonial-quote-font-size: var(--text-xl);
  --testimonial-quote-font-style: italic;
  --testimonial-quote-color: var(--color-text-secondary);
  
  --testimonial-author-font-weight: var(--font-semibold);
  --testimonial-author-color: var(--color-text);
  
  --testimonial-role-font-size: var(--text-sm);
  --testimonial-role-color: var(--color-text-muted);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - FAQ
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --faq-bg: transparent;
  --faq-padding-y: var(--space-16);
  --faq-padding-x: var(--space-8);
  --faq-max-width: 48rem;
  
  --faq-item-border-color: var(--color-border);
  --faq-item-padding-y: var(--space-5);
  
  --faq-question-font-weight: var(--font-semibold);
  --faq-question-color: var(--color-text);
  
  --faq-answer-color: var(--color-text-muted);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - PRICING
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --pricing-bg: transparent;
  --pricing-padding-y: var(--space-16);
  --pricing-padding-x: var(--space-8);
  --pricing-gap: var(--space-8);
  
  --pricing-card-bg: var(--color-white);
  --pricing-card-border: var(--border-width) solid var(--color-border);
  --pricing-card-border-radius: var(--radius-2xl);
  --pricing-card-padding: var(--space-8);
  --pricing-card-shadow: var(--shadow-sm);
  
  --pricing-card-featured-border-color: var(--color-primary);
  --pricing-card-featured-shadow: var(--shadow-lg);
  
  --pricing-price-font-size: var(--text-4xl);
  --pricing-price-font-weight: var(--font-bold);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - RICH TEXT
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --richtext-padding-y: var(--space-8);
  --richtext-padding-x: var(--space-4);
  --richtext-max-width: 65ch;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - IMAGE BLOCK
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --image-block-padding: var(--space-4);
  --image-border-radius: var(--radius-lg);
  --image-shadow: var(--shadow-none);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS - SPACER
     ═══════════════════════════════════════════════════════════════════════════ */
  
  --spacer-sm: var(--space-8);
  --spacer-md: var(--space-16);
  --spacer-lg: var(--space-24);
  --spacer-xl: var(--space-32);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--h1-color);
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--h2-color);
}

h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  color: var(--h3-color);
}

p {
  margin: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO TEXT STYLE CLASSES (Figma-like style selector)
   Use with any tag: e.g. <h2 class="heading-style-h1"> for H2 that looks like H1
   ═══════════════════════════════════════════════════════════════════════════ */

.heading-style-hero {
  font-family: var(--font-heading);
  font-size: var(--hero-headline-font-size);
  font-weight: var(--hero-headline-font-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.heading-style-h1-power-hero {
  font-family: var(--typography-h1-power-hero-font-family);
  font-size: var(--typography-h1-power-hero-font-size);
  font-weight: var(--typography-h1-power-hero-font-weight);
  line-height: var(--typography-h1-power-hero-line-height);
  letter-spacing: var(--typography-h1-power-hero-letter-spacing);
  text-transform: var(--typography-h1-power-hero-text-transform);
  color: var(--color-text-inverse);
}
.heading-style-h2-power-hero-split {
  font-family: var(--typography-h2-power-hero-split-font-family);
  font-size: var(--typography-h2-power-hero-split-font-size);
  font-weight: var(--typography-h2-power-hero-split-font-weight);
  line-height: var(--typography-h2-power-hero-split-line-height);
  letter-spacing: var(--typography-h2-power-hero-split-letter-spacing);
  text-transform: var(--typography-h2-power-hero-split-text-transform);
  color: var(--color-text-inverse);
}
.heading-style-h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); color: var(--h1-color); }
.heading-style-h2 { font-family: var(--h2-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); color: var(--h2-color); }
.heading-style-h3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); color: var(--h3-color); }
.heading-style-h4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); color: var(--h4-color); }
.heading-style-h5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); color: var(--h5-color); }
.heading-style-h6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); color: var(--h6-color); }
.heading-style-section { font-family: var(--h2-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); color: var(--h2-color); }
.heading-style-card { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); color: var(--h4-color); }
.heading-style-body-large { font-family: var(--body-font-family); font-size: var(--text-lg); font-weight: var(--body-font-weight); line-height: var(--leading-relaxed); color: var(--body-color); }

.subhead-style-hero {
  font-family: var(--font-body);
  font-size: var(--hero-subhead-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--leading-relaxed);
  opacity: var(--hero-subhead-opacity, 0.9);
}
.subhead-style-body { font-family: var(--body-font-family); font-size: var(--body-font-size); font-weight: var(--body-font-weight); line-height: var(--body-line-height); color: var(--body-color); }
.subhead-style-body-large { font-family: var(--body-font-family); font-size: var(--text-lg); font-weight: var(--body-font-weight); line-height: var(--leading-relaxed); color: var(--body-color); }
.subhead-style-h3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); color: var(--h3-color); }
.subhead-style-h4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); color: var(--h4-color); }
.subhead-style-h5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); color: var(--h5-color); }
.subhead-style-h6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); color: var(--h6-color); }
.subhead-style-section { font-family: var(--h2-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); color: var(--h2-color); }
.subhead-style-card { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); color: var(--h4-color); }

* {
  box-sizing: border-box;
}