/* === DESIGN BOOK: marketing-dark-3 === */
/* Source: B2B messenger platform landing (dark glass-pill, violet-primary, tri-stop motion gradient) */
/* Captured: 2026-04-17  |  CSS-prefix: --md3-* */

:root {
  /* =============================================================== */
  /*  COLORS — surface, elevated, primary, gradient, text            */
  /* =============================================================== */

  /* Surface (page base — near-black) */
  --md3-color-surface:            #0D0D0D;   /* body bg */
  --md3-color-surface-alt:        #0C0D10;   /* alt surface, slightly blue-tinted */
  --md3-color-surface-inverse:    #FFFFFF;   /* for reverse-card segments */
  --md3-color-black-true:         #000000;   /* overlay (with alpha) */

  /* Elevated (pill cards, chips, glass header) */
  --md3-color-elevated:           #281D3A;   /* pill card base, purple-tinted */
  --md3-color-elevated-hover:     #34264B;   /* pill card :hover/focus */
  --md3-color-elevated-deep:      #20162D;   /* deeper variant */
  --md3-color-elevated-ink:       #181827;   /* blue-charcoal variant */

  /* Glass layers (backdrop-blur accompanied) */
  --md3-color-glass-card:         rgba(40, 29, 58, 0.8);   /* header pill */
  --md3-color-glass-bar:          rgba(13, 13, 13, 0.8);   /* sticky CTA bar */
  --md3-color-overlay:            rgba(13, 13, 13, 0.8);   /* mobile menu overlay */

  /* Primary accent — single solid violet */
  --md3-color-primary:            #630EFF;                 /* CTA button default */
  --md3-color-primary-hsl:        264, 100%, 53%;

  /* Signature motion gradient — cyan → blue → violet (LEFT→RIGHT) */
  --md3-color-grad-motion-1:      #01C5C8;                 /* electric cyan */
  --md3-color-grad-motion-2:      #046EF4;                 /* electric blue */
  --md3-color-grad-motion-3:      #572DFF;                 /* electric violet */
  --md3-gradient-motion:          linear-gradient(97deg, #01C5C8 0.32%, #046EF4 44.6%, #572DFF 62.16%);

  /* Primary button default gradient — deep navy→plum */
  --md3-color-grad-deep-1:        #161F8A;                 /* deep navy */
  --md3-color-grad-deep-2:        #2D085F;                 /* plum */
  --md3-gradient-deep:            linear-gradient(135deg, #161F8A 0px, #2D085F 100%);

  /* Conic brand logo gradient — cyan→blue→magenta rotating */
  --md3-color-conic-1:            #00CCFF;
  --md3-color-conic-2:            #0026FF;
  --md3-color-conic-3:            #A500C6;
  --md3-gradient-conic:           conic-gradient(from 132deg, #00CCFF 85deg, #0026FF 180deg, #A500C6 340deg);

  /* Subtle violet wash (used on icon-container backgrounds at opacity 0.1) */
  --md3-color-wash-violet-a:      rgba(211, 166, 255, 0.1);
  --md3-color-wash-violet-b:      rgba(143, 63, 224, 0.1);
  --md3-gradient-wash:            linear-gradient(135deg, rgba(211,166,255,0.1) 0px, rgba(143,63,224,0.1) 100%);

  /* Secondary button wash — neutral grey drift (subtle depth) */
  --md3-gradient-secondary:       linear-gradient(135deg, rgba(67,67,67,0.8) 0px, rgba(67,67,67,0.2) 100%);

  /* Text hierarchy */
  --md3-color-text:               #FFFFFF;                 /* primary text */
  --md3-color-text-high:          #C3C3C3;                 /* high-secondary */
  --md3-color-text-body:          #B5B5B5;                 /* secondary body */
  --md3-color-text-muted:         #9A9A9A;                 /* tertiary / footer link */
  --md3-color-text-disabled:      rgba(255, 255, 255, 0.4);

  /* Functional (derived — not site-native, needed for demo completeness) */
  --md3-color-success:            #01C5C8;                 /* borrow cyan stop */
  --md3-color-danger:             #FF3B61;                 /* complementary to violet */
  --md3-color-warning:            #FFB020;
  --md3-color-info:               #046EF4;                 /* borrow blue stop */

  /* Borders / dividers (minimal use on site) */
  --md3-color-border-faint:       rgba(255, 255, 255, 0.06);
  --md3-color-border-strong:      rgba(255, 255, 255, 0.12);

  /* Focus ring */
  --md3-color-focus-ring:         #FFFFFF;

  /* =============================================================== */
  /*  TYPOGRAPHY                                                     */
  /* =============================================================== */

  /* Font families — proprietary geometric sans (source) → Inter (free replacement with matching metrics) */
  --md3-font-sans:                "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md3-font-display:             var(--md3-font-sans);    /* single-family discipline */
  --md3-font-mono:                "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Size scale — BINARY: body 16-24 vs display 56-72 (NO mid-tier 40/48) */
  --md3-size-xs:                  14px;
  --md3-size-sm:                  16px;                    /* body base */
  --md3-size-body:                16.8px;                  /* body comfort (1.05em) */
  --md3-size-md:                  18px;
  --md3-size-lg:                  20px;                    /* button + nav */
  --md3-size-xl:                  24px;                    /* lead / H4 */
  --md3-size-2xl:                 28px;                    /* sub-heading */
  --md3-size-3xl:                 32px;                    /* card title / H3 */
  --md3-size-4xl:                 48px;                    /* tablet display */
  --md3-size-5xl:                 56px;                    /* H2 desktop */
  --md3-size-6xl:                 72px;                    /* H1 hero desktop */

  /* Weights — 3-weight economy (no 700+) */
  --md3-weight-regular:           400;                     /* body */
  --md3-weight-medium:            500;                     /* headings + buttons (HERO WEIGHT) */
  --md3-weight-semibold:          600;                     /* rare emphasis */

  /* Line heights */
  --md3-lh-display:               1.0;                     /* 56-72px headings collapse to 1.0 */
  --md3-lh-heading:               1.2;                     /* card titles */
  --md3-lh-snug:                  1.25;                    /* descriptions */
  --md3-lh-button:                1.4;                     /* button label */
  --md3-lh-body:                  1.5;                     /* prose */

  /* Letter spacing — minimal system (1 tracking value) */
  --md3-tracking-display:         -0.64px;                 /* negative tight for display */
  --md3-tracking-normal:          0;                       /* default */

  /* =============================================================== */
  /*  SPACING — 8px base unit                                        */
  /* =============================================================== */

  --md3-space-0:                  0;
  --md3-space-1:                  4px;                     /* micro */
  --md3-space-2:                  8px;                     /* xs */
  --md3-space-3:                  12px;                    /* sm (half-step) */
  --md3-space-4:                  16px;                    /* md — page edge + header inset */
  --md3-space-5:                  20px;                    /* */
  --md3-space-6:                  24px;                    /* lg */
  --md3-space-7:                  32px;                    /* xl */
  --md3-space-8:                  40px;
  --md3-space-9:                  48px;                    /* 2xl — footer group gap */
  --md3-space-10:                 60px;                    /* pill right padding for chevron */
  --md3-space-11:                 80px;                    /* 4xl — STANDARD SECTION PADDING */
  --md3-space-12:                 92px;                    /* 5xl — section tight variant */
  --md3-space-13:                 120px;                   /* 6xl — hero breathing */

  --md3-space-section:            80px;                    /* semantic alias */
  --md3-space-section-cover:      90px;                    /* for cover sections (asymmetric) */
  --md3-space-page-edge:          16px;
  --md3-space-card-inset:         16px;

  /* =============================================================== */
  /*  RADII                                                          */
  /* =============================================================== */

  --md3-radius-0:                 0;                       /* default flat */
  --md3-radius-md:                16px;                    /* BUTTONS + icon boxes */
  --md3-radius-lg:                24px;                    /* header pill */
  --md3-radius-xl:                28px;                    /* PILL CARD (signature) */
  --md3-radius-2xl:               32px;
  --md3-radius-3xl:               48px;
  --md3-radius-full:              9999px;                  /* fully rounded */

  /* =============================================================== */
  /*  SHADOWS                                                        */
  /* =============================================================== */

  /* Signature two-layer soft lift (exactly what the source uses) */
  --md3-shadow-signature:
    rgba(0, 0, 0, 0.05) 0px 40px 25px 0px,
    rgba(0, 0, 0, 0.10) 0px 5px 10px 0px;

  --md3-shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.2);
  --md3-shadow-md:                0 4px 12px rgba(0, 0, 0, 0.25);
  --md3-shadow-lg:                0 16px 40px rgba(0, 0, 0, 0.35);

  /* Violet glow (for device-mockup ambient) */
  --md3-shadow-glow-violet:       0 0 120px rgba(99, 14, 255, 0.35);
  --md3-shadow-glow-cyan:         0 0 80px rgba(1, 197, 200, 0.25);

  /* =============================================================== */
  /*  MOTION                                                         */
  /* =============================================================== */

  --md3-duration-fast:            200ms;                   /* opacity 0.2 */
  --md3-duration-normal:          300ms;                   /* color, most hovers */
  --md3-duration-slow:            600ms;                   /* transform big moves */
  --md3-duration-xslow:           1000ms;                  /* scroll reveal dramatic */

  --md3-ease:                     ease;                    /* site uses plain ease */
  --md3-ease-out:                 cubic-bezier(0.16, 1, 0.3, 1);
  --md3-ease-inout:               cubic-bezier(0.4, 0, 0.2, 1);

  --md3-transition-all:           all 200ms ease;
  --md3-transition-color:         color 300ms ease;
  --md3-transition-transform:     transform 600ms ease;
  --md3-transition-bg:            background-color 600ms ease, transform 200ms ease;

  /* Signature keyframe timing budgets */
  --md3-anim-fadein:              fadeIn 300ms ease forwards;
  --md3-anim-slidein:             slideIn 300ms ease forwards;   /* translateY(-16px)→0 */
  --md3-anim-slideup:             slideUp 300ms ease forwards;   /* translateY(60px)→0 */

  /* =============================================================== */
  /*  LAYOUT                                                         */
  /* =============================================================== */

  --md3-container-max:            1196px;                  /* observed pill max-width */
  --md3-container-edge:           16px;                    /* symmetric page edge */

  /* Breakpoints (mobile-first, from media queries on source) */
  --md3-bp-sm:                    340px;
  --md3-bp-sm-2:                  350px;
  --md3-bp-md:                    420px;
  --md3-bp-lg:                    744px;                   /* tablet */
  --md3-bp-xl:                    1060px;                  /* desktop nav appears */
  --md3-bp-2xl:                   1160px;                  /* wide */

  /* Header pill dimensions */
  --md3-header-inset:             16px;                    /* distance from viewport edge */
  --md3-header-min-height:        64px;
  --md3-header-radius:            24px;

  /* =============================================================== */
  /*  Z-INDEX                                                        */
  /* =============================================================== */

  --md3-z-base:                   1;
  --md3-z-header:                 10;
  --md3-z-sticky-cta:             20;
  --md3-z-overlay:                40;
  --md3-z-modal:                  50;
  --md3-z-toast:                  100;

  /* =============================================================== */
  /*  EXTENSION: marketing-dark                                      */
  /* =============================================================== */

  /* Glass blur strengths */
  --md3-blur-header:              blur(15px);              /* header pill backdrop */
  --md3-blur-sticky:              blur(15px);              /* sticky CTA backdrop */
  --md3-blur-icon:                blur(10px);              /* icon container inner */

  /* Glow intensities (for product mockup ambience) */
  --md3-glow-xs:                  0 0 24px rgba(99, 14, 255, 0.25);
  --md3-glow-sm:                  0 0 60px rgba(99, 14, 255, 0.30);
  --md3-glow-md:                  0 0 120px rgba(99, 14, 255, 0.35);
  --md3-glow-lg:                  0 0 220px rgba(99, 14, 255, 0.40);

  /* Gradient reveal — used for H1 first-word text-clip */
  --md3-gradient-text-clip:       var(--md3-gradient-motion);

  /* Button interaction signatures */
  --md3-btn-hover-gradient:       var(--md3-gradient-motion);   /* ::before opacity 0→1 */
  --md3-btn-active-scale:         scale(0.97);
  --md3-btn-active-opacity:       0.8;

  /* Pill-card interaction */
  --md3-card-radius:              28px;
  --md3-card-padding:             16px 60px 16px 24px;     /* asymmetric: right reserved for chevron */
  --md3-card-bg:                  var(--md3-color-elevated);
  --md3-card-bg-hover:            var(--md3-color-elevated-hover);
  --md3-card-transition:          background-color 600ms ease, transform 200ms ease;

  /* Hero grid (2x2 icons in hero right column) */
  --md3-hero-grid:                repeat(2, 205.5px);
  --md3-hero-grid-gap:            9px;

  /* --gradient-point — exposed as site uses it */
  --gradient-point:               0.34;
}

/* =============================================================== */
/*  PREFERS REDUCED MOTION                                         */
/* =============================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --md3-duration-fast:   0ms;
    --md3-duration-normal: 0ms;
    --md3-duration-slow:   0ms;
    --md3-duration-xslow:  0ms;
  }
}