:root {
  /* ==========================================================================
     COLOR TOKENS (Extracted from Framer Style Guide)
     ========================================================================== */
  
  /* Primary / Accent Tokens (Editorial Silver Neutral #D4D4D4) */
  --color-primary: #D4D4D4;           /* Primary Accent (#D4D4D4) */
  --accent-blue: #D4D4D4;
  --accent-blue-hover: #BFBFBF;
  --accent-blue-glow: rgba(212, 212, 212, 0.35);
  --accent-silver: #D4D4D4;
  --accent-silver-glow: rgba(212, 212, 212, 0.4);

  /* Background */
  --neutral-bg: #F5F5F5;             /* neutral-bg */
  --bg-page: #F5F5F5;

  /* Neutral Scale */
  --neutral-0: #FFFFFF;               /* neutral-0 (Pure White) */
  --neutral-50: #FAFAFA;              /* neutral-50 */
  --neutral-100: #F5F5F5;             /* neutral-100 */
  --neutral-200: #E5E5E5;             /* neutral-200 */
  --neutral-300: #D4D4D4;             /* neutral-300 */
  --neutral-400: #999999;             /* neutral-400 */
  --neutral-500: #7A7A7A;             /* neutral-500 */
  --neutral-550: #1F1F1F;             /* neutral-550 */
  --neutral-600: #000000;             /* neutral-600 (Pure Black) */

  /* Legacy semantic mappings */
  --bg-white: var(--neutral-0);
  --bg-card: var(--neutral-0);
  --bg-card-hover: var(--neutral-50);
  --bg-dark: var(--neutral-600);
  --bg-dark-surface: #0a0a0a;
  --bg-dark-card: #121212;
  
  --text-dark: var(--neutral-600);
  --text-dark-secondary: var(--neutral-500);
  --text-dark-muted: var(--neutral-400);
  --text-light: var(--neutral-0);
  --text-light-secondary: #a3a3a3;
  --text-light-muted: #737373;
  
  --border-light: var(--neutral-200);
  --border-card: #f0f0f0;
  --border-divider: #e8e8e8;
  --border-dark: var(--neutral-550);

  /* ==========================================================================
     TYPOGRAPHY TOKENS (Extracted from Framer Style Guide)
     ========================================================================== */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* --- Headings --- */
  /* H1: Inter, Semibold (600), 120px, letter: -0.04em, line: 1.1em, color: neutral-600 */
  --font-h1-size: 120px;
  --font-h1-weight: 600;
  --font-h1-letter: -0.04em;
  --font-h1-line: 1.1em;

  /* H1-Blog: Inter, Semibold (600), 72px, letter: -0.06em, line: 1.1em, color: neutral-600 */
  --font-h1-blog-size: 72px;
  --font-h1-blog-weight: 600;
  --font-h1-blog-letter: -0.06em;
  --font-h1-blog-line: 1.1em;

  /* H2: Inter, Semibold (600), 56px, letter: -0.06em, line: 110% (1.1), color: neutral-600 */
  --font-h2-size: 56px;
  --font-h2-weight: 600;
  --font-h2-letter: -0.06em;
  --font-h2-line: 1.1;

  /* H3: Inter, Medium (500), 40px, letter: -0.05em, line: 1.3em, color: neutral-600 */
  --font-h3-size: 40px;
  --font-h3-weight: 500;
  --font-h3-letter: -0.05em;
  --font-h3-line: 1.3em;

  /* H4: Inter, Regular (400), 22px, letter: -0.04em, line: 1.4em, color: neutral-600 */
  --font-h4-size: 22px;
  --font-h4-weight: 400;
  --font-h4-letter: -0.04em;
  --font-h4-line: 1.4em;

  /* --- Paragraphs / Body --- */
  /* Body-64: Inter, Semibold (600), 64px, letter: -0.06em, line: 110% (1.1), color: #000000 */
  --font-body-64-size: 64px;
  --font-body-64-weight: 600;
  --font-body-64-letter: -0.06em;
  --font-body-64-line: 1.1;

  /* Body-48: Inter, Semibold (600), 48px, letter: -0.05em, line: 1em, color: neutral-0 (#ffffff) */
  --font-body-48-size: 48px;
  --font-body-48-weight: 600;
  --font-body-48-letter: -0.05em;
  --font-body-48-line: 1em;

  /* Body-32: Inter, Semibold (600), 36px, letter: -0.04em, line: 1.3em, color: #000000 */
  --font-body-32-size: 36px;
  --font-body-32-weight: 600;
  --font-body-32-letter: -0.04em;
  --font-body-32-line: 1.3em;

  /* Body-28: Inter, Medium (500), 32px, letter: -0.04em, line: 1.4em, color: neutral-50 (#fafafa) */
  --font-body-28-size: 32px;
  --font-body-28-weight: 500;
  --font-body-28-letter: -0.04em;
  --font-body-28-line: 1.4em;

  /* Body-24: Inter, Medium (500), 28px, letter: -0.04em, line: 1.3em, color: neutral-500 (#7a7a7a) */
  --font-body-24-size: 28px;
  --font-body-24-weight: 500;
  --font-body-24-letter: -0.04em;
  --font-body-24-line: 1.3em;

  /* Body-20: Inter, Semibold (600), 22px, letter: -0.04em, line: 1.4em, color: neutral-500 (#7a7a7a) */
  --font-body-20-size: 22px;
  --font-body-20-weight: 600;
  --font-body-20-letter: -0.04em;
  --font-body-20-line: 1.4em;

  /* Body-20-blog: Inter, Regular (400), 22px, letter: -0.04em, line: 1.3em, color: neutral-500 (#7a7a7a) */
  --font-body-20-blog-size: 22px;
  --font-body-20-blog-weight: 400;
  --font-body-20-blog-letter: -0.04em;
  --font-body-20-blog-line: 1.3em;

  /* Body-18: Inter, Medium (500), 20px, letter: -0.04em, line: 1.3em, color: #666666 */
  --font-body-18-size: 20px;
  --font-body-18-weight: 500;
  --font-body-18-letter: -0.04em;
  --font-body-18-line: 1.3em;

  /* Body-16: Inter, Regular (400), 16px, letter: -0.04em, line: 1.6em, color: #666666 */
  --font-body-16-size: 16px;
  --font-body-16-weight: 400;
  --font-body-16-letter: -0.04em;
  --font-body-16-line: 1.6em;

  /* Body-16 med: Inter, Medium (500), 16px, letter: -0.04em, line: 1.3em, color: #666666 */
  --font-body-16-med-size: 16px;
  --font-body-16-med-weight: 500;
  --font-body-16-med-letter: -0.04em;
  --font-body-16-med-line: 1.3em;

  /* Body-14: Inter, Medium (500), 16px, letter: -0.04em, line: 1.6em, color: #666666 */
  --font-body-14-size: 16px;
  --font-body-14-weight: 500;
  --font-body-14-letter: -0.04em;
  --font-body-14-line: 1.6em;

  /* Body-12: Inter, Semibold (600), 12px, letter: -0.04em, line: 1.6em, color: neutral-0 (#ffffff) */
  --font-body-12-size: 12px;
  --font-body-12-weight: 600;
  --font-body-12-letter: -0.04em;
  --font-body-12-line: 1.6em;

  /* --- Functional --- */
  /* Tag: Inter, Semibold (600), 16px, letter: -0.02em, line: 1.6em, color: #666666 */
  --font-tag-size: 16px;
  --font-tag-weight: 600;
  --font-tag-letter: -0.02em;
  --font-tag-line: 1.6em;

  /* Primary Button: Inter, Semibold (600), 18px, letter: -0.04em, line: 1.4em, color: neutral-600 (#000000) */
  --font-btn-primary-size: 18px;
  --font-btn-primary-weight: 600;
  --font-btn-primary-letter: -0.04em;
  --font-btn-primary-line: 1.4em;

  /* Link Button: Inter, Semibold (600), 14px, letter: -0.04em, line: 1.4em, color: neutral-600 (#000000) */
  --font-btn-link-size: 14px;
  --font-btn-link-weight: 600;
  --font-btn-link-letter: -0.04em;
  --font-btn-link-line: 1.4em;

  /* ==========================================================================
     LAYOUT & SHADOWS
     ========================================================================== */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-pill: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 40px rgba(0, 0, 255, 0.35);
  
  /* Standard Emil Kowalski Easing & Motion Tokens */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out for responsive UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* strong ease-in-out for on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-like drawer / sheet curve */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);      /* crisp micro-interaction spring */

  --duration-instant: 120ms;
  --duration-fast: 180ms;
  --duration-normal: 260ms;
  --duration-slow: 400ms;
  
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --max-width: 1440px;
}