/* shared/tokens.css — the one design vocabulary for all 20 gallery modules.
 *
 * Palette lineage: docs/datadog-alert-iphone.html (Datadog purples/reds/greens,
 * near-black glass surfaces). Everything downstream — shell (F02) and the 20
 * modules (F04–F13) — reads from these custom properties so the wall reads as
 * one system. Import once: <link rel="stylesheet" href="../shared/tokens.css">.
 */
:root {
  color-scheme: dark;

  /* ---- Type ---- */
  --uc-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, system-ui, sans-serif;
  --uc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Modular type scale (1.20 minor-third off a 15px base) */
  --uc-fs-11: 11px;
  --uc-fs-12: 12.5px;
  --uc-fs-13: 13.5px;
  --uc-fs-15: 15px;   /* body */
  --uc-fs-18: 18px;
  --uc-fs-22: 22px;
  --uc-fs-27: 27px;
  --uc-fs-33: 33px;
  --uc-fs-40: 40px;
  --uc-fs-56: 56px;   /* hero / clock */

  --uc-fw-regular: 400;
  --uc-fw-medium: 590;
  --uc-fw-semibold: 700;
  --uc-fw-bold: 800;

  --uc-tracking-tight: -0.02em;
  --uc-tracking-wide: 0.05em;
  --uc-leading-tight: 1.1;
  --uc-leading-body: 1.5;

  /* ---- Color: Datadog palette lineage ---- */
  --uc-purple: #632ca6;
  --uc-purple-lt: #9b6fe0;
  --uc-purple-br: #c29bee;
  --uc-red: #e0455a;
  --uc-red-lt: #ff7b87;
  --uc-green: #2bac76;
  --uc-green-lt: #6fe3ad;
  --uc-yellow: #e8b33e;
  --uc-blue: #5a93c9;

  /* Ink */
  --uc-text: #e9e7f0;
  --uc-dim: #9c98ad;
  --uc-faint: #726d84;

  /* Surfaces (opaque) */
  --uc-bg: #060509;
  --uc-bg-2: #120f1c;
  --uc-panel: #211e2b;
  --uc-panel-2: #1a1823;
  --uc-line: #2f2b3a;
  --uc-line-strong: #42394f;

  /* Brand gradients / accents */
  --uc-accent: var(--uc-purple-lt);
  --uc-danger: var(--uc-red);
  --uc-ok: var(--uc-green);
  --uc-warn: var(--uc-yellow);

  /* Stage background (matches the datadog reference wash) */
  --uc-stage-bg:
    radial-gradient(1200px 800px at 50% 6%, rgba(99, 44, 166, 0.1) 0%, transparent 60%),
    radial-gradient(900px 900px at 50% 120%, #120f1c 0%, transparent 60%),
    #060509;

  /* ---- Glass ---- */
  --uc-glass-bg: rgba(38, 34, 48, 0.62);
  --uc-glass-bg-soft: rgba(38, 34, 48, 0.42);
  --uc-glass-border: rgba(255, 255, 255, 0.14);
  --uc-glass-border-soft: rgba(255, 255, 255, 0.08);
  --uc-glass-blur: blur(24px) saturate(140%);
  --uc-glass-blur-soft: blur(12px) saturate(120%);
  --uc-glass-highlight: rgba(255, 255, 255, 0.06);

  /* ---- Radii ---- */
  --uc-r-xs: 5px;
  --uc-r-sm: 8px;
  --uc-r-md: 12px;
  --uc-r-lg: 18px;
  --uc-r-xl: 22px;
  --uc-r-2xl: 32px;
  --uc-r-pill: 999px;
  --uc-r-phone: 56px;
  --uc-r-phone-screen: 44px;

  /* ---- Spacing (4px base) ---- */
  --uc-sp-1: 4px;
  --uc-sp-2: 8px;
  --uc-sp-3: 12px;
  --uc-sp-4: 16px;
  --uc-sp-5: 24px;
  --uc-sp-6: 32px;
  --uc-sp-7: 48px;
  --uc-sp-8: 64px;

  /* ---- Elevation ---- */
  --uc-shadow-card: 0 20px 40px -12px rgba(0, 0, 0, 0.55);
  --uc-shadow-pop: 0 14px 34px -10px rgba(0, 0, 0, 0.7);
  --uc-shadow-device: 0 50px 90px -20px rgba(0, 0, 0, 0.8),
    0 0 120px -30px rgba(99, 44, 166, 0.3);
  --uc-glow-accent: 0 0 40px -8px rgba(155, 111, 224, 0.55);

  /* ---- Motion: easing + durations (from the datadog reference) ---- */
  --uc-ease-rise: cubic-bezier(0.22, 0.9, 0.32, 1);   /* enter / slide up */
  --uc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot / pop */
  --uc-ease-zoom: cubic-bezier(0.2, 0.85, 0.3, 1);    /* unpack / scale */
  --uc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* general */

  --uc-dur-fast: 150ms;
  --uc-dur-base: 320ms;
  --uc-dur-slow: 550ms;
  --uc-dur-xslow: 1000ms;
}

/* Reduced-motion: collapse the motion tokens so any consumer that reads them
 * (CSS transitions/animations built on --uc-dur-*) becomes effectively instant.
 * JS utilities in motion.js also branch on the same media query. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --uc-dur-fast: 1ms;
    --uc-dur-base: 1ms;
    --uc-dur-slow: 1ms;
    --uc-dur-xslow: 1ms;
  }
}