/*
 * Design tokens — ported verbatim from the AISIX Cloud dashboard
 * (dashboard/app/globals.css @theme, origin/main 8cd70e34).
 *
 * Swiss/International aesthetic: monochromatic warm-gray base, chromatic
 * color reserved for status semantics, API7 corporate-blue brand kept for
 * hero gradients / active nav / the single primary CTA per page.
 * OKLCH throughout so lightness steps stay perceptually uniform.
 */

:root {
  /* Neutral palette — warm gray (tiny amber bias). */
  --color-neutral-50:  oklch(98.5% 0.002 75);
  --color-neutral-100: oklch(96% 0.003 75);
  --color-neutral-200: oklch(91% 0.004 75);
  --color-neutral-300: oklch(83% 0.004 75);
  --color-neutral-400: oklch(67% 0.005 75);
  --color-neutral-500: oklch(54% 0.005 75);
  --color-neutral-600: oklch(42% 0.005 75);
  --color-neutral-700: oklch(33% 0.004 75);
  --color-neutral-800: oklch(23% 0.003 75);
  --color-neutral-900: oklch(16% 0.003 75);
  --color-neutral-950: oklch(10% 0.002 75);

  /* Semantic status colors — used only for state, not decoration. */
  --color-success:    oklch(68% 0.14 155);
  --color-success-bg: oklch(95% 0.03 155);
  --color-warning:    oklch(75% 0.15 80);
  --color-warning-bg: oklch(96% 0.04 80);
  --color-danger:     oklch(60% 0.21 25);
  --color-danger-bg:  oklch(95% 0.04 25);

  /* Semantic mappings — surfaces, borders, text. */
  --color-bg:            var(--color-neutral-50);
  --color-bg-elevated:   #ffffff;
  --color-bg-subtle:     var(--color-neutral-100);
  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text:          var(--color-neutral-900);
  --color-text-muted:    var(--color-neutral-500);
  --color-text-subtle:   var(--color-neutral-400);
  --color-accent:        var(--color-neutral-900);
  --color-accent-fg:     var(--color-neutral-50);
  --color-focus-ring:    oklch(62% 0.17 252);

  /* Brand palette — API7 corporate blue + cyan companion. */
  --color-brand:        oklch(52% 0.20 260);
  --color-brand-strong: oklch(45% 0.22 262);
  --color-brand-soft:   oklch(94.5% 0.03 252);
  --color-brand-fg:     #ffffff;
  --color-brand-2:      oklch(70% 0.14 228);
  --color-brand-2-soft: oklch(94% 0.04 228);
  --gradient-brand: linear-gradient(135deg,
                      oklch(48% 0.24 264) 0%,
                      oklch(58% 0.18 248) 50%,
                      oklch(68% 0.14 228) 100%);
  --gradient-brand-soft: linear-gradient(135deg,
                      oklch(96% 0.04 262) 0%,
                      oklch(96% 0.04 228) 100%);
  --shadow-card-hover: 0 1px 2px oklch(0% 0 0 / 0.04),
                       0 8px 24px oklch(52% 0.20 260 / 0.08);

  /* Fonts — Geist via Google Fonts (see index.html), monospace for digits. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale for page-level hierarchy. */
  --text-display: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --text-page:    clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-section: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);

  /* Page rhythm. */
  --space-page-x:    clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-page-y:    clamp(2rem, 1.5rem + 2vw, 4rem);
  --space-section-y: clamp(1.5rem, 1rem + 1.5vw, 3rem);

  /* Radius — inputs small, cards medium, panels large. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Motion. */
  --duration-fast:   120ms;
  --duration-normal: 220ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-w: 15rem;   /* 240px — md:w-60 in the real shell */
  --topbar-h: 3.5rem;   /* 56px — h-14 */
}