/* ============================================================================
   Design tokens - the single source of visual truth.

   Every colour, space and radius in the panel resolves to a variable here.
   Nothing downstream hard-codes a hex value, which is what makes a theme
   change a one-file edit rather than a search-and-replace across 4,000
   lines of markup.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Palette -------------------------------------------------------- */
  /* Neutrals carry the interface; a single accent carries meaning. */
  --c-bg:            #0a0c10;
  --c-surface:       #11151c;
  --c-surface-raised:#161b24;
  --c-surface-sunken:#0d1015;
  --c-border:        #222a36;
  --c-border-strong: #2f3a4a;

  --c-text:          #e6ebf2;
  --c-text-muted:    #93a0b3;
  --c-text-subtle:   #66738a;

  --c-accent:        #4f8cff;
  --c-accent-hover:  #6b9dff;
  --c-accent-sunken: #1b2c4d;

  /* Foreground for text sitting ON a saturated fill. These stay fixed
     across themes: a white label on the accent blue reads correctly in
     both, and swapping it per theme would break contrast, not preserve it. */
  --c-on-accent: #ffffff;
  --c-on-danger: #ffffff;
  --c-on-warn:   #1a1f28;

  /* Status colours are semantic, never decorative. If something is red,
     an operator must be able to act on it. */
  --c-ok:            #3fb950;
  --c-ok-bg:         #0f2916;
  --c-warn:          #d29922;
  --c-warn-bg:       #2b2008;
  --c-danger:        #f85149;
  --c-danger-bg:     #2d1113;
  --c-info:          #58a6ff;
  --c-info-bg:       #0d1f33;

  /* --- Typography ----------------------------------------------------- */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* --- Space ---------------------------------------------------------- */
  /* A 4px base scale. Using the scale keeps rhythm consistent without
     anyone having to think about it. */
  --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;

  /* --- Shape ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --border-thin: 1px solid var(--c-border);

  /* --- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow:    0 4px 16px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.5);

  /* --- Motion --------------------------------------------------------- */
  /* Fast enough to feel instant, slow enough to be followed. */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-slow: 320ms;

  /* --- Layout --------------------------------------------------------- */
  --sidebar-width: 240px;
  --header-height: 56px;
  --content-max:   1600px;

  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   700;
}

/* Light theme, opt-in via data-theme so it can never be applied by accident. */
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg:            #f6f8fa;
  --c-surface:       #ffffff;
  --c-surface-raised:#ffffff;
  --c-surface-sunken:#eef1f5;
  --c-border:        #d6dbe3;
  --c-border-strong: #b8c0cc;

  --c-text:          #1a1f28;
  --c-text-muted:    #5a6675;
  --c-text-subtle:   #8592a3;

  --c-accent-sunken: #e3edff;

  --c-ok-bg:     #e6f6ea;
  --c-warn-bg:   #fdf4e0;
  --c-danger-bg: #fdeceb;
  --c-info-bg:   #e7f1fe;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow:    0 4px 16px rgb(16 24 40 / 0.08);
  --shadow-lg: 0 16px 48px rgb(16 24 40 / 0.14);
}

/* Honour the operating-system preference for reduced motion. An admin
   panel that animates through a firewall change is actively unhelpful. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}