/* ============================================================
   D2C Design Tokens — variables.css
   Lift (Lift-Gedrag Marketing Website)
   Extracted directly from Figma node 0:5783
   ============================================================ */
:root {
  /* Colors - Exact Figma Brand Palette */
  --color-primary:          #834AE0;
  --color-primary-hover:    #7338D5;
  --color-text-primary:     #020101;
  --color-eyebrow:          #5B28AD;
  --color-surface:          #FFFFFF;
  --color-page-bg:          #FFFFFF;
  --color-card-border:      rgba(124, 58, 237, 0.08);

  /* Marquee Tokens */
  --color-marquee-text:     #020101;
  --gradient-marquee:       linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%), linear-gradient(90deg, rgba(124, 58, 237, 0.04) 38.92%, rgba(225, 71, 161, 0.04) 100.01%);

  /* Gradients */
  --gradient-behavior:      linear-gradient(90deg, #803AEB 0%, #A33FD0 25%, #CA44B2 45%, #E147A2 60%, #F1804D 80%, #FBA11B 100%);
  --gradient-works:         linear-gradient(180deg, #F7F7FE 38.63%, rgba(247, 247, 254, 0.00) 109.3%), #FFF;

  /* Typography */
  --font-family-base:       'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading:           var(--font-family-base);
  --font-body:              var(--font-family-base);
  --font-accent:            'La Belle Aurore', cursive;

  /* Exact Font Sizes from Figma */
  --font-size-eyebrow:      14px;
  --font-size-nav:          16px;
  --font-size-nav-btn:      16px;
  --font-size-body:         18px;
  --font-size-h1:           clamp(2.75rem, 5.85vw, 84px);
  --font-size-btn:          20px;
  --font-size-marquee:      24px;

  /* Font Weights */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-subtext:    550;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* Line Heights */
  --line-height-tight:      1.1;
  --line-height-body:       1.5;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.038em;
  --letter-spacing-tight:   -0.015em;
  --letter-spacing-eyebrow: 0.08em;

  /* Layout & Card */
  --hero-card-max-width:    1416px;
  --hero-card-min-height:   min(815px, calc(100vh - 120px));
  --hero-card-radius:       24px;
  --header-height:          92px;

  /* Border Radius */
  --radius-sm:              8px;
  --radius-full:            9999px;

  /* Motion */
  --ease-out-smooth:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:          180ms;
  --duration-base:          320ms;
  --duration-slow:          550ms;

  /* Z-Index Hierarchy */
  --z-base:                 1;
  --z-marquee:              2;
  --z-overlay:              90;
  --z-nav:                  100;
  --z-drawer:               150;
  --z-modal:                200;

  /* Section & Plan Card Tokens */
  --color-text-secondary:   #555562;
  --color-text-muted:       #8E8D98;
  --color-plan-pill-bg:     #F2F2F2;
  --color-plan-pill-hover:  #E8E8E8;
  --color-plan-pill-active: #020101;
  --color-plan-card-bg:     #FFFFFF;
  --color-plan-card-border: rgba(0, 0, 0, 0.07);
  --color-plan-card-shadow: 0 24px 48px -12px rgba(131, 74, 224, 0.06), 0 4px 16px -2px rgba(0, 0, 0, 0.03);
  --color-plan-header-bg:   #F1ECFC;
  --color-plan-header-text: #6E39CB;
  --color-plan-row-border:  #F0EFF5;
  --color-plan-icon-bg:     #ECE6FA;
  --color-plan-icon-color:  #834AE0;

  /* Gauge Progress Tokens */
  --gradient-kpi-bar:          linear-gradient(90deg, #7C3AED 42.86%, #E147A1 107.15%);
  --color-gauge-bg:            #EFF0F4;
  --color-gauge-hatch-pattern: repeating-linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0px, rgba(124, 58, 237, 0.4) 2px, rgba(220, 210, 248, 0.45) 2px, rgba(220, 210, 248, 0.45) 6px);
  --color-gauge-target-line:   #7C3AED;
  --color-gauge-target-text:   #6E6D7A;

  /* Additional Typography & Radius Tokens */
  --font-size-h2:           clamp(2rem, 3.8vw, 52px);
  --font-size-card-title:   18px;
  --font-size-card-desc:    15px;
  --font-size-card-score:   17px;
  --font-size-card-target:  14px;
  --radius-md:              16px;
  --radius-lg:              24px;

  /* Reality Check & Sticky Notes Tokens */
  --color-reality-bg:                 #FFFFFF;
  --color-reality-dot-grid:           #D0D5DD;
  --color-reality-yellow:             #FFE27A;
  --color-reality-yellow-hover:       #F5D35A;
  --color-reality-yellow-light:       #FDF5A3;
  --color-reality-yellow-light-hover: #F4E885;
  --color-reality-pink:               #FFBDF2;
  --color-reality-pink-hover:         #F49DE2;
  --color-reality-green:              #85E0A3;
  --color-reality-green-hover:        #6ECE8E;
  --color-reality-teal:               #38BA9B;
  --color-reality-teal-hover:         #2CA386;
  --color-reality-blue:               #80CAFF;
  --color-reality-blue-hover:         #62B5F2;
  --color-counter-bg:                 #0D0D0D;
  --color-counter-box:                #1D2939;
  --color-counter-text:               #FFFFFF;
  --color-counter-subtext:            #EAECF0;
  --color-reality-text:               #020101;
  --color-reality-header-accent:      #5B28AD;

  /* Moving Section Tokens (Figma node 872:2089) */
  --color-moving-icon-bg:             rgba(89, 37, 220, 0.10);
  --color-moving-icon-stroke:         #7339D4;
  --color-moving-text-subtle:         #475467;

  /* Approach Section Tokens (Figma node 0:6111) */
  --color-approach-bg:                #FFFFFF;
  --color-approach-eyebrow:           #834AE0;
  --color-approach-line:              #E2E4E9;
  --color-approach-badge-bg:          #000000;
  --color-approach-badge-text:        #FFFFFF;
  --color-approach-pill-bg:           #FFFFFF;
  --color-approach-pill-border:       #E5E7EB;
  --color-approach-pill-hover-border: #D1D5DB;
  --color-approach-pill-text:         #1F2937;
  --color-approach-step-desc:         #475467;
}