/* ============================================================
   DESIGN BOOK: landing-3
   Type: landing | Date: 2026-04-17
   Source: Russian conversion-marketing long-form landing,
           dual-accent orange+violet, warm-shadow, serif display
   Superpowers: TBD (see dna.md)
   ============================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────── */

  /* Primary (CTA default: buttons, price highlights, active tabs) */
  --ld3-color-primary:         #FF8A00;
  --ld3-color-primary-hover:   #5E4ABB;  /* violet swap on hover */
  --ld3-color-primary-active:  #4C3B9E;  /* deeper violet on press */
  --ld3-color-primary-subtle:  rgba(255, 138, 0, 0.1);

  /* Secondary (violet — hover/interactive states, play buttons) */
  --ld3-color-secondary:       #5E4ABB;
  --ld3-color-secondary-hover: #4C3B9E;
  --ld3-color-secondary-muted: #8E84B5;
  --ld3-color-secondary-subtle: rgba(94, 74, 187, 0.15);

  /* Neutral scale (cool-neutral, slight blue-violet undertone in darks) */
  --ld3-color-neutral-50:      #FCFBFA;
  --ld3-color-neutral-100:     #F1F1F1;
  --ld3-color-neutral-200:     #DBDBDB;
  --ld3-color-neutral-300:     #CCCCCC;
  --ld3-color-neutral-400:     #BEBEBE;
  --ld3-color-neutral-500:     #B2B2B3;
  --ld3-color-neutral-600:     #8E8E8E;
  --ld3-color-neutral-700:     #232323;
  --ld3-color-neutral-800:     #111111;
  --ld3-color-neutral-900:     #0D0D10;
  --ld3-color-neutral-950:     #0B0813;  /* dark section — violet-tinted black */

  /* Surface */
  --ld3-color-bg:              #FFFFFF;
  --ld3-color-surface:         #FCFBFA;
  --ld3-color-surface-raised:  #FFFFFF;
  --ld3-color-surface-dark:    #0B0813;  /* dark sections (email/promo) */
  --ld3-color-surface-footer:  #1F1F1F;
  --ld3-color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* Text */
  --ld3-color-text:            #0D0D10;
  --ld3-color-text-secondary:  #8E84B5;  /* violet-tinted secondary */
  --ld3-color-text-disabled:   #BEBEBE;
  --ld3-color-text-inverse:    #FFFFFF;
  --ld3-color-text-on-primary: #FFFFFF;
  --ld3-color-text-highlight:  #FF8A00;  /* inline KPI/number highlights */

  /* Border */
  --ld3-color-border:          #DBDBDB;
  --ld3-color-border-strong:   #0D0D10;
  --ld3-color-border-subtle:   rgba(13, 13, 16, 0.1);

  /* Semantic */
  --ld3-color-success:         #34C759;
  --ld3-color-success-subtle:  rgba(52, 199, 89, 0.1);
  --ld3-color-warning:         #FF8A00;  /* shares primary orange */
  --ld3-color-warning-subtle:  rgba(255, 138, 0, 0.1);
  --ld3-color-danger:          #FF3B30;
  --ld3-color-danger-subtle:   rgba(255, 59, 48, 0.1);
  --ld3-color-info:            #5E4ABB;  /* shares secondary violet */
  --ld3-color-info-subtle:     rgba(94, 74, 187, 0.1);

  /* Decorative */
  --ld3-color-gold:            #DFB888;  /* warm accent for badges */
  --ld3-color-checkbox-hover:  #FFC887;  /* warm gold hover */
  --ld3-color-checkbox-active: #D9D4F3;  /* lavender pressed */


  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  /* Playfair Display — Google Fonts (free, the source uses PlayfairDisplay-Italic) */
  --ld3-font-display: 'Playfair Display', Georgia, serif;
  /* Inter — Google Fonts / bundled (free) */
  --ld3-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  /* CTA heavy — Gilroy-Heavy is proprietary → free alternative: Manrope 800 */
  --ld3-font-cta:     'Manrope', 'Inter', system-ui, sans-serif;
  --ld3-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Size scale — source base is 15px (unusual, not 16px) */
  --ld3-font-size-2xs:  10px;
  --ld3-font-size-xs:   12px;
  --ld3-font-size-sm:   14px;
  --ld3-font-size-base: 15px;   /* DOMINANT body — smaller than typical */
  --ld3-font-size-md:   16px;
  --ld3-font-size-lg:   18px;
  --ld3-font-size-xl:   20px;
  --ld3-font-size-2xl:  25px;
  --ld3-font-size-3xl:  30px;
  --ld3-font-size-4xl:  36px;
  --ld3-font-size-5xl:  50px;   /* H1 display */

  /* Weights — 400 dominance (96.3%), bold is rare accent */
  --ld3-font-weight-light:    300;
  --ld3-font-weight-regular:  400;  /* dominant — 96% of text */
  --ld3-font-weight-medium:   500;
  --ld3-font-weight-semibold: 600;
  --ld3-font-weight-bold:     700;
  --ld3-font-weight-heavy:    800;  /* CTA buttons only */

  /* Line heights — tight for headings, relaxed for body */
  --ld3-line-height-tightest: 1.10;  /* display headings 50px */
  --ld3-line-height-tight:    1.17;  /* section headings 30px */
  --ld3-line-height-snug:     1.30;  /* subheadings */
  --ld3-line-height-normal:   1.47;  /* DOMINANT body (15/22) */
  --ld3-line-height-relaxed:  1.56;  /* larger body 18/28 */

  /* Letter spacing — pervasive positive spacing (signature trait) */
  --ld3-letter-spacing-body:     0.4px;   /* DEFAULT — pervasive, 39% of elements */
  --ld3-letter-spacing-subhead:  0.5px;
  --ld3-letter-spacing-heading:  1px;
  --ld3-letter-spacing-cta:      2px;     /* uppercase CTA only */
  --ld3-letter-spacing-wide:     1.5px;


  /* ── SPACING ─────────────────────────────────────────────── */

  /* Irregular grid — intention-driven, not 4px/8px base */
  --ld3-space-0:    0px;
  --ld3-space-1:    5px;
  --ld3-space-2:    6px;
  --ld3-space-3:    10px;
  --ld3-space-4:    13px;
  --ld3-space-5:    16px;
  --ld3-space-6:    20px;
  --ld3-space-7:    24px;
  --ld3-space-8:    30px;
  --ld3-space-9:    34px;
  --ld3-space-10:   42px;
  --ld3-space-11:   44px;
  --ld3-space-12:   55px;
  --ld3-space-14:   80px;
  --ld3-space-16:   88px;
  --ld3-space-20:   100px;
  --ld3-space-24:   116px;
  --ld3-space-32:   154px;

  /* Semantic aliases */
  --ld3-space-xs:   var(--ld3-space-3);    /* 10px */
  --ld3-space-sm:   var(--ld3-space-4);    /* 13px */
  --ld3-space-md:   var(--ld3-space-6);    /* 20px */
  --ld3-space-lg:   var(--ld3-space-8);    /* 30px */
  --ld3-space-xl:   var(--ld3-space-10);   /* 42px */
  --ld3-space-2xl:  var(--ld3-space-12);   /* 55px */
  --ld3-space-3xl:  var(--ld3-space-14);   /* 80px */

  /* Layout */
  --ld3-container-max:    1265px;   /* actual measured width */
  --ld3-container-wide:   1680px;   /* CSS max-width */
  --ld3-section-pt:       88px;     /* typical section top padding */
  --ld3-section-pb:       89px;     /* typical section bottom padding */
  --ld3-section-pt-large: 154px;    /* hero/materials sections */


  /* ── BORDER RADIUS ──────────────────────────────────────── */

  /* Binary system: sharp (0px) vs pill (100px+) with rare intermediates */
  --ld3-radius-none:    0px;      /* 95% of elements — sharp default */
  --ld3-radius-xs:      2px;      /* subtle */
  --ld3-radius-sm:      6px;      /* rare soft */
  --ld3-radius-md:      10px;     /* rare card */
  --ld3-radius-lg:      20px;     /* card panels */
  --ld3-radius-xl:      30px;     /* feature cards */
  --ld3-radius-pill:    100px;    /* CTA buttons, badges — signature */
  --ld3-radius-extreme: 1000px;   /* decorative extreme pill */
  --ld3-radius-circle:  50%;      /* avatars */


  /* ── SHADOWS ────────────────────────────────────────────── */

  /* Signature: warm orange-tinted shadows (NOT neutral black) */
  --ld3-shadow-none:    none;
  --ld3-shadow-xs:      rgba(0, 0, 0, 0.2) 0px 7px 15px;
  --ld3-shadow-sm:      rgba(252, 137, 0, 0.1) 0px 30px 70px;
  --ld3-shadow-md:      rgba(255, 138, 0, 0.2) 0px 25px 35px;           /* CTA default */
  --ld3-shadow-lg:      rgba(13, 13, 16, 0.1) 0px 5px 70px,
                        rgba(255, 138, 0, 0.05) 0px 5px 75px;           /* dual-layer subtle */
  --ld3-shadow-xl:      rgba(13, 13, 16, 0.35) 0px 0px 70px,
                        rgba(255, 138, 0, 0.05) 0px 15px 75px;          /* dual-layer signature */
  --ld3-shadow-2xl:     rgba(255, 138, 0, 0.9) 0px 30px 70px;           /* intense orange glow */
  --ld3-shadow-inner:   rgba(30, 30, 30, 0.1) 1.4px 1.4px 6px inset;   /* feature cards */

  /* State shadows */
  --ld3-shadow-cta-hover:   rgba(94, 74, 187, 0.25) 0px 15px 35px;     /* violet hover glow */
  --ld3-shadow-cta-active:  rgba(76, 59, 158, 0.25) 0px 0px 35px;      /* pressed flush glow */
  --ld3-shadow-play-hover:  rgba(94, 74, 187, 0.9) 0px 30px 100px;     /* video play glow */


  /* ── MOTION ─────────────────────────────────────────────── */

  /* Three-speed system: micro (100ms) / UI (150-300ms) / reveal (800ms) */
  --ld3-duration-micro:     100ms;   /* button bg/shadow change */
  --ld3-duration-fast:      150ms;   /* secondary button, checkbox */
  --ld3-duration-normal:    300ms;   /* tabs, sliders, opacity */
  --ld3-duration-slow:      500ms;   /* reserved */
  --ld3-duration-reveal:    800ms;   /* scroll-reveal entrance */

  /* Easing — ease-out dominant */
  --ld3-ease-default: ease-out;
  --ld3-ease-in:      ease-in;
  --ld3-ease-in-out:  ease-in-out;
  --ld3-ease-reveal:  cubic-bezier(0.16, 1, 0.3, 1);  /* smooth decelerate */

  /* Hover micro-interactions */
  --ld3-hover-press: translateY(10px);    /* CTA active press */
  --ld3-hover-arrow-press: translateY(5px); /* slider arrow active */

  /* Transition presets */
  --ld3-transition-cta:
    background-color var(--ld3-duration-micro) var(--ld3-ease-default),
    box-shadow       var(--ld3-duration-micro) var(--ld3-ease-default),
    transform        var(--ld3-duration-micro) var(--ld3-ease-default);

  --ld3-transition-link:
    color            var(--ld3-duration-micro) var(--ld3-ease-default),
    border-bottom    var(--ld3-duration-micro) var(--ld3-ease-default);


  /* ── Z-INDEX ────────────────────────────────────────────── */

  --ld3-z-base:      1;
  --ld3-z-raised:    2;
  --ld3-z-content:   5;
  --ld3-z-dropdown:  10;
  --ld3-z-sticky:    11;
  --ld3-z-overlay:   50;
  --ld3-z-modal:     999;
  --ld3-z-top:       9999;


  /* ── EXTENSION: LANDING ─────────────────────────────────── */

  /* Scroll reveal (ripple + fade observed) */
  --ld3-reveal-duration:     0.8s;
  --ld3-reveal-delay-base:   0.1s;
  --ld3-reveal-stagger:      0.08s;
  --ld3-reveal-distance:     30px;
  --ld3-reveal-easing:       cubic-bezier(0.16, 1, 0.3, 1);

  /* Price display */
  --ld3-price-original-color:  var(--ld3-color-text);         /* strikethrough */
  --ld3-price-sale-color:      var(--ld3-color-primary);      /* orange sale price */
  --ld3-price-sale-size:       var(--ld3-font-size-3xl);

  /* Scarcity */
  --ld3-scarcity-color:        var(--ld3-color-primary);      /* countdown, urgency */
  --ld3-scarcity-bg:           var(--ld3-color-primary-subtle);

  /* Ripple animation (play button, CTA press) */
  --ld3-ripple-size-sm:  1000px;
  --ld3-ripple-size-lg:  1400px;
  --ld3-ripple-duration: 2s;

  /* Video player accent */
  --ld3-video-play-bg:         var(--ld3-color-primary);       /* orange play */
  --ld3-video-play-hover-bg:   var(--ld3-color-secondary);     /* violet on hover */

  /* Top promo bar */
  --ld3-promo-bar-bg:          var(--ld3-color-neutral-900);
  --ld3-promo-bar-text:        var(--ld3-color-text-inverse);
  --ld3-promo-bar-accent:      var(--ld3-color-primary);
}


/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}