/* =============================================================================
   Prowel Telefusion · Atlas Series — Design System
   tokens.css — Spacing, radius, elevation, motion & layout
   -----------------------------------------------------------------------------
   Complements colors_and_type.css (color + typography). Spacing and radius are
   taken from the source artifact's :root block; elevation/motion values are
   transcribed from the source component rules (transitions, pulse keyframe).

   NOTE — semantic state colors: the source uses ONE accent (green) only.
   The four --status-* tokens below are inferred extensions for the applied
   telecom/network UI kit (link status is a core domain concept). They are
   derived in the same OKLCH hue geometry, clearly marked as inferred.
   ========================================================================== */

:root {
  /* ── Spacing scale (gap system from source) ────────────────────────────── */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap-md: 22px;
  --gap-lg: clamp(24px, 3vw, 46px);
  --gap-xl: clamp(34px, 4.6vw, 76px);

  /* component padding (observed) */
  --pad-cell: clamp(22px, 2.2vw, 34px);   /* .cell */
  --pad-chassis: clamp(20px, 2.4vw, 36px);/* .chassis */
  --pad-shot: clamp(18px, 2.4vw, 40px);   /* .shot-frame */
  --pad-btn: 15px 26px;                    /* .btn */

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --radius: 12px;      /* default: buttons, ports, nav-btn, inputs */
  --radius-lg: 16px;   /* cards / cells / chassis / compare frames */
  --radius-sm: 11px;   /* icon containers inside cells */
  --radius-tick: 2px;  /* eyebrow tick square */
  --radius-pill: 999px;/* tags, series pill, LED status */

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  /* The system is border-first: depth is communicated with hairlines + the
     accent glow, not with drop shadows. Shadows are reserved for overlays. */
  --ring-focus: 2px solid var(--accent);
  --ring-focus-offset: 2px;
  --glow-accent:
    radial-gradient(closest-side,
      color-mix(in oklch, var(--accent) 26%, transparent),
      transparent 72%);
  --glow-accent-dark:
    radial-gradient(closest-side,
      color-mix(in oklch, var(--accent-bright) 18%, transparent),
      transparent 72%);
  --shadow-overlay: 0 30px 80px rgba(0, 0, 0, 0.35); /* full-screen stage only */

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 0.15s;   /* border / background / active press */
  --dur-med: 0.45s;    /* slide reveal, progress fill */
  --dur-pulse: 2.6s;   /* status dot pulse */
  --press-y: 1px;      /* button/nav active translateY */

  /* ── Layout metrics ────────────────────────────────────────────────────── */
  --max-content: 1600px; /* .slide-inner */
  --max-read: 62ch;      /* body measure */
  --max-lead: 58ch;      /* lead measure */
  --measure-cell: 56ch;  /* lead text width cap for slides */

  /* breakpoints observed in source */
  --bp-1100: 1100px;
  --bp-920: 920px;
  --bp-900: 900px;
  --bp-640: 640px;

  /* ── Semantic status (INFERRED — source ships only the green accent) ───── */
  --status-ok:     var(--accent);                                   /* online / active */
  --status-warn:   oklch(72% 0.15 85);                              /* degraded / failover */
  --status-danger: oklch(58% 0.19 25);                              /* down / panic */
  --status-info:   oklch(58% 0.13 250);                             /* informational */
}

/* Reduced motion: honor the user's preference for every animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-med: 0.01ms;
    --dur-pulse: 0.01ms;
  }
}