/* =============================================================
 * design-tokens.css — Liquid Glass design system tokens
 * Single source of truth for colors, fonts, radii, shadows, motion.
 * Imported on every page that adopts the new visual language.
 * Additive: does not conflict with /_marketing.css for pages that
 * still use the legacy stylesheet.
 * ============================================================= */

:root {
  /* ── Colors ─────────────────────────────────────────────────── */
  /* Surfaces */
  --bg:           #F4F1FB;
  --bg-deep:      #E9E3F7;
  --paper:        rgba(255, 255, 255, 0.62);
  --surface:      #FFFFFF;

  /* Text */
  --ink:          #0B0F1F;
  --ink-soft:     #3A4159;
  --ink-mute:     #6B7390;

  /* Hairlines */
  --hair:         rgba(11, 15, 31, 0.08);
  --hair-soft:    rgba(11, 15, 31, 0.05);

  /* Brand */
  --blue:         #1234DC;
  --blue-dk:      #0A1F8F;
  --blue-lt:      #5E7BFF;
  --cyan:         #1ED1E6;

  /* Semantic */
  --coral:        #FF7A6A;  /* Danger / Stop / Clock-out */
  --amber:        #FFB547;  /* Warning / Lunch */
  --green:        #16C784;  /* Success / Live */

  /* ── Typography ─────────────────────────────────────────────── */
  --sans:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:         'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display sizes (fluid via clamp for responsive scaling) */
  --fs-display-xl: clamp(48px, 8vw, 80px);  /* hero h1 */
  --fs-display-lg: clamp(40px, 6vw, 64px);  /* tagline */
  --fs-display:    clamp(32px, 4.5vw, 48px); /* section h2 */
  --fs-h3:         20px;
  --fs-body-lg:    19px;
  --fs-body:       16px;
  --fs-body-sm:    15px;
  --fs-meta:       13px;
  --fs-eyebrow:    11px;

  /* Display letter-spacing — tight per design spec */
  --tracking-display: -0.04em;
  --tracking-hero:    -0.045em;
  --tracking-mono:    0.18em;

  /* ── Radii ──────────────────────────────────────────────────── */
  --r-pill:       999px;
  --r-card:       22px;
  --r-card-lg:    28px;
  --r-input:      14px;
  --r-icon-sm:    7px;
  --r-icon:       18px;  /* horizontal logo icon square */
  --r-icon-lg:    36px;  /* app icon iOS squircle */

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-glass:     0 1px 0 rgba(255,255,255,0.95) inset, 0 1px 2px rgba(11,15,31,0.06), 0 24px 50px -20px rgba(10,31,143,0.18);
  --shadow-pill:      0 8px 28px -8px rgba(10,31,143,0.22), 0 1px 0 rgba(255,255,255,0.95) inset;
  --shadow-btn-pri:   0 10px 24px -8px rgba(18,52,220,0.5), 0 1px 0 rgba(255,255,255,0.45) inset;
  --shadow-btn-pri-sm:0 4px 12px -2px rgba(18,52,220,0.5), 0 1px 0 rgba(255,255,255,0.5) inset;
  --shadow-icon:      0 4px 10px -2px rgba(18,52,220,0.5);

  /* ── Glass surface ──────────────────────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.55);
  --glass-border:     1px solid rgba(255, 255, 255, 0.7);
  --glass-blur:       blur(24px) saturate(180%);

  --glass-bg-dark:    rgba(11, 15, 31, 0.55);
  --glass-border-dark:1px solid rgba(255, 255, 255, 0.12);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:       150ms var(--ease-out);
  --t-medium:     280ms var(--ease-out);
  --t-slow:       450ms var(--ease-out);

  /* ── Spacing scale ──────────────────────────────────────────── */
  --gutter-page:  64px;   /* desktop side padding */
  --gutter-mob:   24px;   /* mobile side padding */
  --max-content:  1280px;
  --max-text:     720px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mobile gutters */
@media (max-width: 760px) {
  :root {
    --gutter-page: var(--gutter-mob);
  }
}