/* admin/static/css/tokens.css
   Single source of truth for the admin dashboard design system.
   Every other CSS file resolves against these variables. */

:root {
  /* Surfaces */
  --bg-canvas:      #0d1117;
  --bg-surface:     #161b22;
  --bg-elevated:    #21262d;
  --bg-sunken:      #010409;
  --surface-hover:  #1f2937;

  /* Borders */
  --border-subtle:  #30363d;
  --border-strong:  #484f58;
  --border-focus:   #58a6ff;

  /* Text (contrast tuned for --bg-surface and --bg-canvas) */
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #a0a0b0;
  --text-on-accent: #ffffff;

  /* Accents (GitHub-blue primary, Discord-blue as secondary brand accent) */
  --accent-primary:       #58a6ff;
  --accent-primary-hover: #79b8ff;
  --accent-brand:         #5865f2;
  --accent-brand-hover:   #4752c4;

  /* Status */
  --status-success:    #3fb950;
  --status-warning:    #d29922;
  --status-danger:     #f85149;
  --status-info:       #58a6ff;
  --status-success-bg: #0f2f1a;
  --status-warning-bg: #2d2410;
  --status-danger-bg:  #3a1215;
  --status-info-bg:    #0c2d48;

  /* Spacing scale (4px base, 8-step) */
  --space-0: 0;
  --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;
  --space-8: 4rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-focus-ring:  0 0 0 3px rgba(88, 166, 255, 0.35);
  --shadow-danger-ring: 0 0 0 3px rgba(248, 81, 73, 0.35);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);

  /* Z-index scale */
  --z-base:           1;
  --z-sticky:         100;
  --z-dropdown:       200;
  --z-sidebar:        300;
  --z-side-sheet:     800;
  --z-modal-backdrop: 900;
  --z-modal:          1000;
  --z-toast:          1100;

  /* Layout metrics */
  --sidebar-width:            240px;
  --sidebar-width-collapsed:  56px;
  --topbar-height:            48px;
  --page-max-width:           1600px;
}

/* Respect the user's OS reduced-motion preference by collapsing durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}