/*
 * e-sender.pro — design tokens.
 * Single source of truth for the landing and for every product mockup, so a mockup dropped into
 * a section reads as part of the same product rather than a screenshot from a different app.
 * Colour carries meaning here: blue is system/control, green healthy, amber warning,
 * red critical, violet automation/AI. Nothing decorative gets a hue of its own.
 */

:root {
  /* Surfaces, darkest to lightest. The page is graphite, not black, so elevated surfaces
     have somewhere to sit. */
  --surface-page: #0a0c10;
  --surface-raised: #101319;
  --surface-card: #151922;
  --surface-card-hover: #1b202b;
  --surface-panel: #0d1016;      /* code / control panel interiors */
  --surface-inset: #070910;

  --border-subtle: #1e2430;
  --border-default: #262e3d;
  --border-strong: #38445a;
  --border-accent: #1d4ed855;

  /* Text */
  /* Four legibility tiers, all of which clear WCAG AA (4.5:1) against --surface-page and
     --surface-raised. The quiet tiers carry real content — captions, notes, status labels — so
     "muted" and "faint" mean lower emphasis, never lower legibility. */
  --text-primary: #e8ecf4;   /* 15.4:1 */
  --text-secondary: #9aa5b8; /*  7.9:1 */
  --text-muted: #838da0;     /*  5.9:1 */
  --text-faint: #737d8f;     /*  4.7:1 */
  --text-on-accent: #04070e;

  /* Primary accent — system and control */
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-dim: #0b4a63;
  --accent-glow: #38bdf826;

  /* Functional status. Never used decoratively. */
  --status-healthy: #34d399;
  --status-warning: #fbbf24;
  --status-critical: #f87171;
  --status-automation: #a78bfa;
  --status-idle: #64748b;

  --status-healthy-bg: #34d3991f;
  --status-warning-bg: #fbbf241f;
  --status-critical-bg: #f871711f;
  --status-automation-bg: #a78bfa1f;
  --status-idle-bg: #64748b1f;

  /* Product availability badges */
  --badge-available: var(--status-healthy);
  --badge-soon: var(--accent);
  --badge-development: var(--status-automation);
  --badge-planned: var(--text-muted);

  /* Typography — neutral grotesk, system stack so the hero paints immediately. */
  --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-hero: clamp(2.75rem, 6vw, 4.75rem);
  --text-h2: clamp(2rem, 3.6vw, 3rem);
  --text-h3: clamp(1.375rem, 2vw, 1.75rem);
  --text-h4: 1.125rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.75rem;

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.022em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-gap: clamp(4rem, 9vw, 8rem);
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px #00000059, 0 8px 24px #00000040;
  --shadow-raised: 0 2px 4px #0000006b, 0 16px 48px #0000004d;
  --shadow-accent: 0 0 0 1px var(--border-accent), 0 8px 32px var(--accent-glow);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;

  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
}

/* Motion is functional. Anyone who asks for less gets none. */
@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;
  }
}