/*
 * tokens.css — canonical design tokens (Session 4: Design System).
 *
 * The single source of truth for every visual value in the portal (D5):
 * color, type scale, spacing, radius, shadow, border, z-index,
 * transitions, breakpoints. Loaded globally via base.html, before
 * app.css and components.css, so every page — migrated or not — has
 * these custom properties available.
 *
 * Supersedes the ad-hoc `--portal-*` set in app.css (6 colors, no other
 * scale). app.css keeps its own `--portal-*` variables for now so
 * unmigrated pages render unchanged (no visual regression); each page
 * migrates to these tokens + the components/ library as its own session
 * touches it (S6-S16 per the migration plan).
 *
 * Values match docs/UI_UX_REFACTOR_PLAN.md §7 exactly (carried over from
 * the Session-3 prototype, now canonical here).
 */

:root {
  /* --- Color (light theme, plan §7.1) --- */
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-2: #eef0f3;
  --color-fg: #1f2329;
  --color-fg-muted: #5b6470;
  --color-border: #d0d4da;
  --color-accent: #1d5fd4;
  --color-accent-fg: #ffffff;
  --color-success-bg: #d3f5e3;
  --color-success-fg: #16794c;
  --color-danger-bg: #fde2e1;
  --color-danger-fg: #b3221a;
  --color-warn-bg: #fef2cc;
  --color-warn-fg: #806318;
  --color-info-bg: #e3edfd;
  --color-info-fg: #1d5fd4;
  --color-neutral-bg: #eef0f3;
  --color-neutral-fg: #5b6470;
  /* Hover panel accent (showcase) — a deep indigo-purple, chosen for high
     contrast against the grid's white/gray surfaces and the blue/green/
     red status badges it hovers over. */
  --color-hover-accent: #6d28d9;
  --color-hover-accent-bg: #ede9fe;
  /* Hover panel restyle — black ink for border + title, light yellow body,
     complementary light blue header. */
  --color-hover-panel-ink: #000000;
  --color-hover-panel-top-bg: #dbeafe;
  --color-hover-panel-bottom-bg: #fffbe6;
  /* Administrator badge — eye-catching purple gradient. */
  --color-admin-badge-from: #6d28d9;
  --color-admin-badge-to: #c026d3;
  /* Hover-darkened accents (buttons.css). Values retained verbatim from the
     former pre-token literals so appearance is unchanged (D5). */
  --color-accent-hover: #1a54bd;
  --color-danger-hover: #8f1a14;
  /* Skeleton shimmer highlight (states.css). */
  --color-skeleton-highlight: #e3e6ea;
  /* Log terminal palette (log_viewer.css) — a deliberately dark, off-theme
     surface for monospace log output; centralized here per D5. */
  --color-terminal-bg: #14161a;
  --color-terminal-fg: #e5e7eb;
  --color-terminal-warn: #f3c969;
  --color-terminal-error: #f2857f;
  --color-terminal-muted: #8b949e;
  /* Embedded-JSON syntax highlight (json-pretty.js) — tuned for the dark
     terminal surface shared by the Logs viewer and the Live activity feed
     (both use --color-terminal-bg), so one palette reads well in both. */
  --color-json-key: #7dcfff;
  --color-json-string: #9ece6a;
  --color-json-number: #e0af68;
  --color-json-boolean: #bb9af7;
  --color-json-null: #8b949e;
  --color-json-border: #2b313c;

  /* --- Type scale (plan §7.2) --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.9rem;
  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-base: 1.5;

  /* --- Spacing (4px base, plan §7.2) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* --- Radius / shadow / border (plan §7.2) --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 35, 41, 0.06);
  --shadow-md: 0 2px 8px rgba(31, 35, 41, 0.08);
  --shadow-pop: 0 6px 24px rgba(31, 35, 41, 0.14);
  --border-1: 1px solid var(--color-border);

  /* --- Z-index layers (plan §7.2) --- */
  --z-base: 0;
  --z-header: 100;
  --z-popover: 800;
  --z-slideover: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* --- Transitions (plan §7.2) --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /*
   * --- Breakpoints (plan §7.2) ---
   * Informational only: CSS custom properties cannot be substituted
   * into an `@media` feature query. Every `@media (max-width: ...)` /
   * `(min-width: ...)` rule in components/*.css uses the literal px
   * value documented here — keep both in sync by hand.
   *   --bp-sm: 640px
   *   --bp-md: 768px
   *   --bp-lg: 1024px
   *   --bp-xl: 1280px
   */
}

/* Motion respects prefers-reduced-motion (plan §7.2/§31) — components
   opt into this at the rule level; this is the shared global fallback. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}