/* Design tokens. Light is the base; dark overrides only what changes.
   Direction: "console" - technical, layered surfaces, monospace metadata,
   provider-coded accents. */

:root {
  /* Neutrals - light */
  --bg:            oklch(98.5% 0.004 250);
  --bg-sunken:     oklch(96%   0.006 250);
  --surface:       oklch(100%  0     0);
  --surface-2:     oklch(97.5% 0.005 250);
  --surface-hover: oklch(95%   0.008 250);
  --border:        oklch(90%   0.008 250);
  --border-strong: oklch(82%   0.012 250);

  --text:          oklch(22%   0.015 250);
  --text-muted:    oklch(48%   0.012 250);
  --text-faint:    oklch(62%   0.010 250);

  /* Brand + semantic */
  --accent:        oklch(58%   0.19  256);
  --accent-text:   oklch(100%  0     0);
  --accent-soft:   oklch(94%   0.035 256);

  --correct:       oklch(60%   0.16  152);
  --correct-soft:  oklch(94%   0.05  152);
  --incorrect:     oklch(58%   0.20  25);
  --incorrect-soft:oklch(94%   0.045 25);
  --flag:          oklch(70%   0.16  70);
  --flag-soft:     oklch(95%   0.05  70);

  /* Cloud providers */
  --aws:           oklch(72%   0.17  62);
  --gcp:           oklch(60%   0.19  256);
  --azure:         oklch(64%   0.17  230);

  /* Type */
  --font-ui:   'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --text-2xl:  clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);

  /* Space - deliberately non-uniform rhythm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Elevation - borders carry weight, shadows stay subtle */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 250 / 0.06);
  --shadow:    0 4px 16px -4px oklch(20% 0.02 250 / 0.12);
  --shadow-lg: 0 24px 60px -18px oklch(20% 0.02 250 / 0.28);

  /* Motion */
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   420ms;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 60px;
  --measure: 74ch;
}

:root[data-theme="dark"] {
  --bg:            oklch(16%   0.014 260);
  --bg-sunken:     oklch(13%   0.014 260);
  --surface:       oklch(20%   0.016 260);
  --surface-2:     oklch(23.5% 0.018 260);
  --surface-hover: oklch(27%   0.020 260);
  --border:        oklch(30%   0.018 260);
  --border-strong: oklch(40%   0.022 260);

  --text:          oklch(95%   0.006 260);
  --text-muted:    oklch(72%   0.012 260);
  --text-faint:    oklch(56%   0.014 260);

  --accent:        oklch(72%   0.16  256);
  --accent-text:   oklch(16%   0.02  260);
  --accent-soft:   oklch(30%   0.06  256);

  --correct:       oklch(76%   0.17  152);
  --correct-soft:  oklch(30%   0.07  152);
  --incorrect:     oklch(70%   0.18  25);
  --incorrect-soft:oklch(30%   0.07  25);
  --flag:          oklch(80%   0.15  75);
  --flag-soft:     oklch(32%   0.07  75);

  --aws:           oklch(78%   0.16  62);
  --gcp:           oklch(72%   0.16  256);
  --azure:         oklch(74%   0.15  230);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow:    0 4px 18px -4px oklch(0% 0 0 / 0.5);
  --shadow-lg: 0 28px 70px -20px oklch(0% 0 0 / 0.7);
}