/* ============================================================
   DESIGN BOOK: marketing-light-4
   Type: marketing-light | Date: 2026-04-16
   Source: AI productivity SaaS marketing — warm neutral palette,
           alpha-layered text, dual-accent blue+red, bento layout
   Superpowers: TBD
   ============================================================ */

:root {

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

  /* Primary (action: links, interactive highlights) */
  --ml4-color-primary:         #0075de;
  --ml4-color-primary-hover:   #005bab;
  --ml4-color-primary-active:  #00396b;
  --ml4-color-primary-subtle:  #f2f9ff;
  --ml4-color-primary-light:   #62aef0;

  /* CTA (high-contrast call-to-action — separate from primary) */
  --ml4-color-cta:             #f64932;
  --ml4-color-cta-hover:       #e32d14;
  --ml4-color-cta-active:      #b01601;

  /* Campaign: hero dark gradient (agents-launch) */
  --ml4-color-campaign-300:    #607df6;
  --ml4-color-campaign-400:    #455dd3;
  --ml4-color-campaign-500:    #394ea3;
  --ml4-color-campaign-600:    #213183;
  --ml4-color-campaign-900:    #02093a;
  --ml4-color-campaign-highlight: #fefcd5;

  /* Neutral scale (warm gray, hue ~35°) */
  --ml4-color-neutral-50:      #f9f9f8;
  --ml4-color-neutral-100:     #f6f5f4;
  --ml4-color-neutral-200:     #dfdcd9;
  --ml4-color-neutral-300:     #a39e98;
  --ml4-color-neutral-400:     #78736f;
  --ml4-color-neutral-500:     #615d59;
  --ml4-color-neutral-600:     #494744;
  --ml4-color-neutral-700:     #31302e;
  --ml4-color-neutral-800:     #191918;
  --ml4-color-neutral-900:     #000000;

  /* Surface */
  --ml4-color-bg:              #ffffff;
  --ml4-color-surface:         #f9f9f8;
  --ml4-color-surface-raised:  #f6f5f4;
  --ml4-color-surface-overlay: rgba(0, 0, 0, 0.5);
  --ml4-color-surface-dark:    #31302e;

  /* Text (alpha-layered — signature pattern) */
  --ml4-color-text:            rgba(0, 0, 0, 0.95);
  --ml4-color-text-body:       rgba(0, 0, 0, 0.9);
  --ml4-color-text-secondary:  rgba(0, 0, 0, 0.54);
  --ml4-color-text-tertiary:   rgba(0, 0, 0, 0.4);
  --ml4-color-text-disabled:   rgba(0, 0, 0, 0.2);
  --ml4-color-text-inverse:    #ffffff;
  --ml4-color-text-on-primary: #ffffff;
  --ml4-color-text-on-cta:     #ffffff;
  --ml4-color-text-literal:    #040404;

  /* Border (alpha-based) */
  --ml4-color-border:          rgba(0, 0, 0, 0.08);
  --ml4-color-border-strong:   rgba(0, 0, 0, 0.15);
  --ml4-color-border-subtle:   rgba(0, 0, 0, 0.05);

  /* Semantic */
  --ml4-color-success:         #1aae39;
  --ml4-color-success-subtle:  #f0faf2;
  --ml4-color-warning:         #ffb110;
  --ml4-color-warning-subtle:  #fff5e0;
  --ml4-color-danger:          #f64932;
  --ml4-color-danger-subtle:   #fef3f1;
  --ml4-color-info:            #097fe8;
  --ml4-color-info-subtle:     #f2f9ff;

  /* Palette (10-hue system, 500-level midpoints) */
  --ml4-palette-red:           #f64932;
  --ml4-palette-orange:        #ff6d00;
  --ml4-palette-yellow:        #ffb110;
  --ml4-palette-teal:          #27918d;
  --ml4-palette-blue:          #097fe8;
  --ml4-palette-purple:        #9849e8;
  --ml4-palette-green:         #1aae39;
  --ml4-palette-pink:          #ff64c8;
  --ml4-palette-brown:         #9c7054;


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

  /* Source uses custom Inter variant. Free analogue: Inter (Google Fonts) */
  --ml4-font-display:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ml4-font-body:     Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ml4-font-mono:     "iA Writer Mono", "Fira Code", Menlo, Courier, monospace;
  /* Source uses proprietary serif — free analogue: "Source Serif 4" */
  --ml4-font-serif:    "Source Serif 4", Georgia, serif;

  /* Size scale (13 tokens, px values) */
  --ml4-font-size-xs:    12px;  /* token-50: captions, badges */
  --ml4-font-size-sm:    14px;  /* token-100: labels, metadata */
  --ml4-font-size-base:  15px;  /* token-150: compact body */
  --ml4-font-size-md:    16px;  /* token-200: primary body (55% of all text) */
  --ml4-font-size-lg:    18px;  /* token-300: large body, intros */
  --ml4-font-size-xl:    20px;  /* token-350: section intros */
  --ml4-font-size-2xl:   22px;  /* token-400: subheadings */
  --ml4-font-size-3xl:   26px;  /* token-500: card headings */
  --ml4-font-size-4xl:   32px;  /* token-600: section headings */
  --ml4-font-size-5xl:   42px;  /* token-700: page headings */
  --ml4-font-size-6xl:   54px;  /* token-800: hero headings */
  --ml4-font-size-7xl:   64px;  /* token-900: statement displays */
  --ml4-font-size-8xl:   76px;  /* token-1000: campaign max-scale */

  /* Weights */
  --ml4-font-weight-regular:   400;
  --ml4-font-weight-medium:    500;
  --ml4-font-weight-semibold:  600;
  --ml4-font-weight-bold:      700;

  /* Line heights (paired with sizes) */
  --ml4-line-height-tight:     1.0;    /* 64px/64px = hero display */
  --ml4-line-height-snug:      1.04;   /* 54px/56px */
  --ml4-line-height-heading:   1.14;   /* 42px/48px */
  --ml4-line-height-subhead:   1.25;   /* 32px/40px */
  --ml4-line-height-body:      1.5;    /* 16px/24px = primary body */
  --ml4-line-height-relaxed:   1.56;   /* 18px/28px */
  --ml4-line-height-ui:        1.43;   /* 14px/20px */

  /* Letter spacing (progressive negative tracking) */
  --ml4-letter-spacing-normal: 0px;            /* ≤16px body */
  --ml4-letter-spacing-tight:  -0.125px;       /* 18-22px subheadings */
  --ml4-letter-spacing-display: -1px;          /* 32px section heads */
  --ml4-letter-spacing-hero:   -2.125px;       /* 64px hero bold */
  --ml4-letter-spacing-ultra:  -3.5px;         /* 54px hero regular */
  --ml4-letter-spacing-max:    -4px;           /* 76px campaign display */


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

  --ml4-space-0:    0px;
  --ml4-space-1:    4px;
  --ml4-space-2:    8px;
  --ml4-space-3:    12px;
  --ml4-space-4:    16px;
  --ml4-space-5:    20px;
  --ml4-space-6:    24px;
  --ml4-space-7:    28px;
  --ml4-space-8:    32px;
  --ml4-space-10:   40px;
  --ml4-space-12:   48px;
  --ml4-space-14:   56px;
  --ml4-space-16:   64px;
  --ml4-space-18:   72px;
  --ml4-space-20:   80px;
  --ml4-space-24:   96px;
  --ml4-space-32:   128px;
  --ml4-space-40:   160px;

  /* Semantic aliases */
  --ml4-space-xs:   var(--ml4-space-2);   /* 8px */
  --ml4-space-sm:   var(--ml4-space-3);   /* 12px */
  --ml4-space-md:   var(--ml4-space-4);   /* 16px */
  --ml4-space-lg:   var(--ml4-space-6);   /* 24px */
  --ml4-space-xl:   var(--ml4-space-8);   /* 32px */
  --ml4-space-2xl:  var(--ml4-space-10);  /* 40px */
  --ml4-space-3xl:  var(--ml4-space-16);  /* 64px */

  /* Layout */
  --ml4-container-max:    none;      /* full-width container */
  --ml4-container-content: 1200px;   /* max readable width */
  --ml4-base-padding:     20px;
  --ml4-section-py:       60px;      /* section vertical padding */
  --ml4-section-py-lg:    80px;
  --ml4-grid-gap:         28px;
  --ml4-grid-gap-sm:      12px;
  --ml4-grid-columns:     12;
  --ml4-nav-height:       64px;


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

  --ml4-radius-none:   0px;
  --ml4-radius-xs:     4px;    /* chips, badges */
  --ml4-radius-sm:     5px;    /* small elements */
  --ml4-radius-md:     8px;    /* cards, inputs — dominant (75x) */
  --ml4-radius-lg:     12px;   /* modals, panels */
  --ml4-radius-xl:     16px;   /* large containers */
  --ml4-radius-pill:   9999px; /* pill buttons, tags (26x) */
  --ml4-radius-circle: 50%;


  /* ── SHADOWS ────────────────────────────────────────────── */
  /* Signature: whisper-opacity multi-layer (0.003–0.08 max) */

  --ml4-shadow-sm:     0px 3px 9px rgba(0,0,0,0.03),
                       0px 0.7px 1.4625px rgba(0,0,0,0.015);
  --ml4-shadow-md:     0px 4px 18px rgba(0,0,0,0.04),
                       0px 2.025px 7.84688px rgba(0,0,0,0.027),
                       0px 0.8px 2.925px rgba(0,0,0,0.02),
                       0px 0.175px 1.04062px rgba(0,0,0,0.013);
  --ml4-shadow-lg:     0px 20px 50px rgba(0,0,0,0.08),
                       0px 6px 16px rgba(0,0,0,0.04);
  --ml4-shadow-glow:   0 0 20px 5px rgba(255,255,255,0.2);
  --ml4-shadow-none:   none;


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

  --ml4-duration-instant:    100ms;
  --ml4-duration-fast:       150ms;
  --ml4-duration-normal:     200ms;
  --ml4-duration-moderate:   250ms;
  --ml4-duration-slow:       300ms;

  --ml4-ease-quint:    cubic-bezier(0.86, 0, 0.07, 1);
  --ml4-ease-quart:    cubic-bezier(0.76, 0, 0.24, 1);
  --ml4-ease-quad:     cubic-bezier(0.45, 0, 0.55, 1);
  --ml4-ease-cubic:    cubic-bezier(0.645, 0.045, 0.355, 1);
  --ml4-ease-in:       ease-in;
  --ml4-ease-out:      ease-out;
  --ml4-ease-linear:   linear;

  --ml4-transition-color: background-color 0.2s ease-in, color 0.2s ease-in;
  --ml4-transition-shadow: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  --ml4-transition-outline: outline-color 0.2s ease-in;


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

  --ml4-z-base:       1;
  --ml4-z-banner:     90;
  --ml4-z-header:     100;
  --ml4-z-mobile-nav: 200;
  --ml4-z-popup:      500;


  /* ── EXTENSION: marketing-light ─────────────────────────── */

  /* Logo strip */
  --ml4-logo-strip-bg:        #191918;   /* dark bg for white logos */
  --ml4-logo-opacity:          0.7;
  --ml4-logo-hover-opacity:    1.0;

  /* Feature cards (bento) */
  --ml4-feature-card-bg:       #f6f5f4;
  --ml4-feature-card-radius:   var(--ml4-radius-md);
  --ml4-feature-icon-bg:       #f2f9ff;
  --ml4-feature-icon-color:    #0075de;

  /* Stats / social proof */
  --ml4-stat-number-size:      var(--ml4-font-size-5xl);
  --ml4-stat-number-weight:    var(--ml4-font-weight-bold);
  --ml4-stat-label-color:      var(--ml4-color-text-secondary);

  /* Pricing calculator */
  --ml4-pricing-featured-bg:   #f2f9ff;
  --ml4-pricing-featured-border: var(--ml4-color-primary);
  --ml4-pricing-check-color:   var(--ml4-color-primary);

  /* Hero dark section */
  --ml4-hero-gradient:         linear-gradient(180deg, #02093a 0%, #213183 100%);
  --ml4-hero-text-color:       #ffffff;
  --ml4-hero-subtext-color:    rgba(255, 255, 255, 0.75);

}


/* ── 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;
  }
}