/* ============================================================
   DESIGN BOOK: marketing-dark-4
   Type: marketing-dark | Date: 2026-04-26
   Source: B2B AdTech-marketplace landing (RU). Dark canvas + light bento cards inversion. Single signature acid-yellow CTA (#effd37) with hover→white inversion. Inter only, weight economy 400/700/800 (no 500/600). Flat dark — NO glassmorphism, NO glow, NO blur. Single universal popup shadow (0 6px 12px rgba(0,0,0,.12)). Binary radius — sharp 0 dominant 89% + button progression 16/22/26 + signature card 26. Section rhythm 80/100 outside the declared --size-2..64 scale. 2px-step token granularity (UNUSUAL — most DS use 4 or 8). 32 declared --size-* tokens, 22 unused on home (overengineered DS bleeds from cabinet UI).
   Superpowers: 7 (final list in dna.md)
   ============================================================ */

:root {

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

  /* Primary — single acid-yellow signature, hover-inverts to white */
  --md4-color-primary:           #effd37;          /* electric lime/yellow, HSL 65°/99%/60% */
  --md4-color-primary-hover:     #ffffff;          /* hover INVERSION — yellow → white */
  --md4-color-primary-active:    #d0cfcf;          /* pressed grey */
  --md4-color-primary-disabled:  #757575;
  --md4-color-primary-text:      #181a1a;          /* always dark text on yellow */

  /* Neutrals (scale derived from --basic-* tokens) */
  --md4-color-neutral-0:    #ffffff;
  --md4-color-neutral-50:   #f5f5f5;               /* --basic-grey-light */
  --md4-color-neutral-100:  #e8e8e8;               /* --basic-grey-semi-light */
  --md4-color-neutral-200:  #d0cfcf;               /* --basic-grey */
  --md4-color-neutral-500:  #757575;               /* --basic-grey-semi-dark — muted text */
  --md4-color-neutral-700:  #585858;               /* --basic-grey-dark */
  --md4-color-neutral-900:  #242525;               /* tooltip near-black drift */
  --md4-color-neutral-950:  #181a1a;               /* --basic-black, slight cyan tint hue 180°/sat 4% */

  /* Surface */
  --md4-color-bg-dark:        #181a1a;             /* hero, CTA bands, dark sections */
  --md4-color-bg-light:       #ffffff;             /* content sections (zebra-by-section) */
  --md4-color-surface-alt:    #f5f5f5;             /* alt cards, action items, disabled inputs */
  --md4-color-surface-card:   #ffffff;             /* white cards on dark canvas */

  /* Text */
  --md4-color-text:           #181a1a;             /* primary on light surface */
  --md4-color-text-muted:     #757575;             /* secondary / placeholder / muted */
  --md4-color-text-disabled:  #d0cfcf;
  --md4-color-text-inverse:   #ffffff;             /* on dark surface */
  --md4-color-text-on-primary:#181a1a;             /* on yellow CTA */

  /* Border */
  --md4-color-border:         #d0cfcf;             /* default 1px */
  --md4-color-border-strong:  #757575;             /* secondary button border */
  --md4-color-border-subtle:  #e8e8e8;             /* input hover bg variant */

  /* UI Blue Family — focus rings (NOT marketing accent) */
  --md4-focus-ring-primary:   #4443be;             /* --primary-violet-blue (light CTA outline) */
  --md4-focus-ring-secondary: #6871e1;             /* --basic-gladiola-blue (dark CTA outline) */
  --md4-focus-halo-3px:       #98a6ff;             /* --primary-aster-flower-blue (3px halo) */
  --md4-focus-halo-3px-dark:  rgba(104, 113, 225, 0.8);  /* gladiola at 80% on dark */
  --md4-focus-halo-error:     hsla(0, 100%, 74%, 0.4);

  /* Status */
  --md4-color-success:         #8cde69;
  --md4-color-success-bg:      #eef9e9;
  --md4-color-success-text:    #265f0b;
  --md4-color-info:            #67dcf1;
  --md4-color-info-bg:         #ebfafd;
  --md4-color-info-text:       #196d88;
  --md4-color-warning:         #ffc107;
  --md4-color-warning-bg:      #fff3dd;
  --md4-color-warning-text:    #785b04;
  --md4-color-danger:          #ff7878;
  --md4-color-danger-bg:       #ffefef;
  --md4-color-danger-text:     #ae2d25;

  /* Rainbow Discount Strip — decorative 4-color band on tier cards */
  --md4-rainbow-blue:    #89c3f8;
  --md4-rainbow-pink:    #f693ab;
  --md4-rainbow-violet:  #6871e1;
  --md4-rainbow-orange:  #ffa665;
  --md4-rainbow-strip:   linear-gradient(90deg, #89c3f8 0%, #f693ab 33%, #6871e1 66%, #ffa665 100%);

  /* Overlay */
  --md4-color-overlay:   rgba(0, 0, 0, 0.5);


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

  /* Single Inter family with system fallback chain. NO separate display font, NO mono. */
  --md4-font-display:  Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md4-font-body:     Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Discrete 7-step scale — big jump 24→36→46 reserved for display, no mid-tier 28-32 */
  --md4-font-size-caption: 12px;   /* button-sm, micro */
  --md4-font-size-small:   14px;   /* button-md, input-sm, notification body */
  --md4-font-size-body:    16px;   /* DOMINANT body 65%+ */
  --md4-font-size-lead:    20px;   /* sub-heading, lead paragraph */
  --md4-font-size-h3:      24px;   /* card title, sub-section */
  --md4-font-size-h2:      36px;   /* section title large */
  --md4-font-size-h1:      46px;   /* hero only */

  /* Weight economy — only 3 needed (400/700/800). Weight 500 in the wild is dead. */
  --md4-font-weight-regular:   400;     /* body dominant 65.7% */
  --md4-font-weight-bold:      700;     /* UI emphasis: buttons ALWAYS, headings */
  --md4-font-weight-extrabold: 800;     /* H1 hero ONLY */

  /* Line heights — fixed-px (NOT unitless). Display tighter than body. */
  --md4-line-height-caption: 16px;   /* ratio 1.33 */
  --md4-line-height-small:   20px;   /* ratio 1.43 */
  --md4-line-height-body:    24px;   /* ratio 1.5 (body default) */
  --md4-line-height-lead:    32px;   /* ratio 1.6 */
  --md4-line-height-h3:      32px;   /* ratio 1.33 */
  --md4-line-height-h2:      48px;   /* ratio 1.33 */
  --md4-line-height-h1:      64px;   /* ratio 1.39 (hero) */

  /* Letter spacing — ALL normal. Trust the Inter native metric. */
  --md4-letter-spacing-normal: 0;


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

  /* Effective scale (only living tokens — 22 of 32 declared --size-* are dead) */
  --md4-space-1:   4px;     /* base unit */
  --md4-space-2:   8px;     /* xs gap, button padding-y */
  --md4-space-3:   12px;    /* sm gap, button-md padding-y */
  --md4-space-4:   16px;    /* PRIMARY UNIT — section internal, button-sm pad-x */
  --md4-space-5:   20px;
  --md4-space-6:   24px;    /* lg gap, section internal vertical */
  --md4-space-7:   32px;    /* xl gap, button-md padding-x */
  --md4-space-8:   36px;    /* section heading bottom */
  --md4-space-9:   44px;    /* button-md height, icon-only md, section gap small */
  --md4-space-10:  48px;    /* input-lg height */

  /* Section rhythm — OUTSIDE the --size-2..64 scale (inline values) */
  --md4-section-pt-default:  80px;   /* default vertical section padding */
  --md4-section-pt-huge:     100px;  /* hero / CTA-band */
  --md4-section-pt-small:    44px;   /* tight section */
  --md4-section-pt-tiny:     20px;   /* mobile or micro-section */

  /* Container */
  --md4-container-min:    1280px;    /* hard floor (--min-page-width) — desktop-first */
  --md4-container-max:    1440px;    /* actual rendered width */
  --md4-hero-text-max:    970px;     /* H1 readable cap */
  --md4-container-pad-x:  16px;

  /* Grid gap */
  --md4-grid-gap-sm:      8px;
  --md4-grid-gap:         16px;      /* default (Reviews_desktop_grid uses 16) */
  --md4-grid-gap-lg:      24px;


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

  /* Binary-biased: 0 dominant 89% + signature progression 16/22/26 + pill 100 + circle */
  --md4-radius-none:    0;          /* DEFAULT 89% — sharp edges everywhere */
  --md4-radius-xs:      8px;        /* --border-radius-s, micro chips */
  --md4-radius-sm:      10px;       /* small details, input-counter */
  --md4-radius-md:      12px;       /* --border-radius-m, notification root */
  --md4-radius-lg:      16px;       /* --border-radius-l, button-sm, input-sm, card md */
  --md4-radius-input-md:20px;       /* input-md container */
  --md4-radius-button-md:22px;      /* button-md (NOT in --border-radius-* scale) */
  --md4-radius-input-lg:24px;       /* input-lg / radius-2xl */
  --md4-radius-button-lg:26px;      /* button-lg + signature CARD radius */
  --md4-radius-2xl:     48px;       /* --border-radius-xl */
  --md4-radius-pill:    100px;      /* full pill (sticky CTA, secondary buttons) */
  --md4-radius-circle:  50%;        /* avatars, datepicker day */


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

  /* Single universal popup shadow — tooltip, notification toast, generic popup */
  --md4-shadow-popup:  0 6px 12px rgba(0, 0, 0, 0.12);
  --md4-shadow-none:   none;

  /* Marketing dark-canvas: NO additional shadows. Dark surface absorbs all elevation. */
  /* Cards on light sections: optional subtle shadow but mostly flat. Use --md4-shadow-popup if needed. */

  /* Focus halo — 3px ring around inputs (signature) */
  --md4-shadow-focus-light:   0 0 0 3px var(--md4-focus-halo-3px);          /* light theme */
  --md4-shadow-focus-dark:    0 0 0 3px var(--md4-focus-halo-3px-dark);     /* dark theme */
  --md4-shadow-focus-error:   0 0 0 3px var(--md4-focus-halo-error);

  /* Outline (button focus) — 2px solid, NOT shadow */
  --md4-outline-focus-on-light:  2px solid var(--md4-focus-ring-primary);    /* #4443be */
  --md4-outline-focus-on-dark:   2px solid var(--md4-focus-ring-secondary);  /* #6871e1 */


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

  --md4-duration-input:       100ms;   /* input border transition */
  --md4-duration-default:     250ms;   /* button hover, fade, transform */
  --md4-duration-alt:         300ms;   /* secondary alt */
  --md4-duration-cookie-in:   500ms;   /* cookie banner slide in */
  --md4-duration-cookie-out:  1500ms;  /* cookie banner slide out (long acknowledge) */

  --md4-ease-linear:   linear;          /* cookie animations */
  --md4-ease-default:  cubic-bezier(0.4, 0, 0.2, 1);   /* hover ease (Material standard, no signature curve) */

  /* Specific transition properties seen in CSS — buttons animate background-color only */
  --md4-transition-button:   background-color var(--md4-duration-default) var(--md4-ease-linear);
  --md4-transition-input:    var(--md4-duration-input) var(--md4-ease-default);
  --md4-transition-popup:    opacity var(--md4-duration-default);
  --md4-transition-default:  all var(--md4-duration-default) var(--md4-ease-default);

  /* Keyframes seen: rotation (spinner 1turn), cookie slide bottom -150→0, running-string marquee */
  /* Define infinite marquee speed for partner-logo ticker: */
  --md4-marquee-speed:        20s;     /* full -50% travel, infinite linear */


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

  --md4-z-base:        1;
  --md4-z-raised:      2;
  --md4-z-sticky:      20;
  --md4-z-modal:       50;
  --md4-z-tooltip:     9999;            /* per CSS */
  --md4-z-notification:10000;           /* per CSS */


  /* ── BREAKPOINTS (Next.js typical, not declared in CSS) ──── */

  --md4-bp-mobile:   480px;
  --md4-bp-tablet:   768px;
  --md4-bp-desktop:  1280px;            /* matches --min-page-width hard floor */
  --md4-bp-wide:     1440px;


  /* ── EXTENSION: marketing-dark (md4-specific) ────────────── */

  /* NO glassmorphism. NO blur. NO glow. NO neon iris. */
  /* This book inverts the marketing-dark genre — flat-dark-with-light-cards instead of dark-glow. */

  /* Dark canvas / Light card inversion (signature) */
  --md4-section-dark-bg:    #181a1a;
  --md4-section-light-bg:   #ffffff;
  --md4-section-alt-bg:     #f5f5f5;

  /* Hero ornament colors (outline doodle SVG: star, wave, arc, dots — 1-1.5px stroke white) */
  --md4-ornament-stroke:    #ffffff;
  --md4-ornament-opacity:   0.5;
  --md4-ornament-stroke-w:  1.5px;

  /* H1 brand-word highlight (single yellow word inside white H1) */
  --md4-h1-accent-color:    var(--md4-color-primary);

  /* Tier card layered logos (overlapping circular brand avatars) */
  --md4-tier-logo-size:     40px;
  --md4-tier-logo-overlap:  -8px;       /* margin-left for overlap */
  --md4-tier-logo-border:   2px solid #ffffff;

  /* Discount strip — pastel rainbow band */
  --md4-discount-strip-h:   12px;       /* band height inside card */
  --md4-discount-strip:     var(--md4-rainbow-strip);

  /* Marquee partner-logo ticker (running-string) */
  --md4-ticker-gap:         60px;       /* spacing between logos */
  --md4-ticker-fade:        80px;       /* edge fade-mask width */

  /* No background patterns — flat solid dark */
  --md4-bg-noise:           none;
  --md4-bg-grid:            none;
}


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