/*
 * Design tokens — entra-to-jsm-sync
 *
 * Authority: planning/MICS-2005/01 - UI Amendments.md §4.
 * Every other CSS file in this repo references these variables; do not
 * hand-roll colors / spacing in component CSS.
 *
 * Color reservations (do not violate without re-reading 01 §2):
 *   - --color-accent (#FF9F27, Datasite brand orange) is for ACCENT ONLY:
 *     active nav underline, active timezone button, focus rings. Never for
 *     "warning" or "in-progress" semantics.
 *   - --color-degraded is yellow-leaning (#ca8a04), not amber/orange, so it
 *     stays visually distinct from brand orange.
 */

:root {
  /* ── Color: neutral ─────────────────────────────────────────────────── */
  --color-bg:         #fafafa;
  --color-surface:    #ffffff;
  --color-surface-2:  #f4f4f5;
  --color-border:     #e4e4e7;
  --color-border-strong: #d4d4d8;
  --color-text:       #18181b;
  --color-text-muted: #52525b;
  --color-text-dim:   #a1a1aa;

  /* ── Color: status ──────────────────────────────────────────────────── */
  --color-ok:           #16a34a;
  --color-ok-bg:        #f0fdf4;
  --color-degraded:     #ca8a04;
  --color-degraded-bg:  #fefce8;
  --color-failed:       #dc2626;
  --color-failed-bg:    #fef2f2;
  --color-running:      #2563eb;
  --color-running-bg:   #eff6ff;
  --color-cancelled:    #71717a;
  --color-cancelled-bg: #f4f4f5;

  /* ── Color: brand (accent / chrome) ────────────────────────────────── */
  --color-accent:        #FF9F27;
  --color-accent-fg:     #18181b;
  --color-brand-bar:     #111113;
  --color-brand-bar-fg:  #f4f4f5;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Spacing — 4 px base grid ─────────────────────────────────────── */
  --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;

  /* ── Radii ────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Elevation ────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 10px rgb(0 0 0 / 0.06);

  /* ── Motion ───────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --ease-std: cubic-bezier(.2,.7,.4,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0b0b0d;
    --color-surface:       #141418;
    --color-surface-2:     #1f1f23;
    --color-border:        #27272a;
    --color-border-strong: #3f3f46;
    --color-text:          #f4f4f5;
    --color-text-muted:    #a1a1aa;
    --color-text-dim:      #71717a;
    --color-ok-bg:         #052e16;
    --color-degraded-bg:   #422006;
    --color-failed-bg:     #450a0a;
    --color-running-bg:    #172554;
    --color-cancelled-bg:  #1f1f23;
  }
}

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