/* ============================================================
   PEDCAM — Design tokens (derived from the Indigo KB design system,
   re-tinted to the PEDCAM brand: navy / teal / orange)
   ============================================================ */

:root {
  --font-ui:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --bg:            oklch(0.984 0.003 220);
  --surface:       #ffffff;
  --surface-2:     oklch(0.975 0.004 220);
  --surface-3:     oklch(0.96 0.005 220);
  --border:        oklch(0.92 0.006 220);
  --border-strong: oklch(0.87 0.008 220);
  --text:          oklch(0.25 0.03 250);
  --text-2:        oklch(0.5 0.02 250);
  --text-3:        oklch(0.64 0.015 250);

  /* Brand: teal primary, navy ink, orange accent */
  --primary:        oklch(0.56 0.1 190);
  --primary-hover:  oklch(0.5 0.1 190);
  --primary-fg:     #ffffff;
  --primary-soft:   oklch(0.95 0.035 190);
  --primary-softer: oklch(0.975 0.018 190);
  --primary-border: oklch(0.87 0.06 190);
  --navy:           oklch(0.33 0.07 250);
  --accent:         oklch(0.72 0.17 55);
  --accent-soft:    oklch(0.96 0.045 60);

  --green:       oklch(0.62 0.15 152);
  --green-soft:  oklch(0.95 0.045 152);
  --amber:       oklch(0.72 0.15 70);
  --amber-soft:  oklch(0.96 0.05 80);
  --red:         oklch(0.6 0.2 25);
  --red-soft:    oklch(0.96 0.04 25);
  --indigo:      oklch(0.55 0.19 285);
  --indigo-soft: oklch(0.96 0.04 285);
  --teal:        oklch(0.6 0.1 195);

  --radius-lg: 16px;
  --radius:    11px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.05);
  --shadow-md: 0 2px 4px -1px rgba(17,24,39,.05), 0 8px 20px -6px rgba(17,24,39,.1);
  --shadow-lg: 0 8px 16px -6px rgba(17,24,39,.08), 0 20px 40px -12px rgba(17,24,39,.16);
  --ring:      0 0 0 3px oklch(0.56 0.1 190 / 0.2);

  --fs-2xl:   1.5rem;
  --fs-xl:    1.25rem;
  --fs-lg:    1.125rem;
  --fs-md:    1rem;
  --fs-base:  0.9375rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.8125rem;
  --fs-2xs:   0.75rem;
  --fs-3xs:   0.6875rem;
  --fs-micro: 0.625rem;

  --sidebar-w: 256px;
  /* One height for every control on a row (buttons, inputs, selects, toggles). */
  --control-h:    38px;
  --control-h-sm: 30px;
  --btn-h:        var(--control-h);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            oklch(0.14 0.015 240);
  --surface:       oklch(0.18 0.015 240);
  --surface-2:     oklch(0.21 0.014 240);
  --surface-3:     oklch(0.24 0.013 240);
  --border:        oklch(0.31 0.012 240);
  --border-strong: oklch(0.39 0.012 240);
  --text:          oklch(0.94 0.005 220);
  --text-2:        oklch(0.73 0.01 220);
  --text-3:        oklch(0.55 0.01 220);

  --primary:        oklch(0.7 0.11 190);
  --primary-hover:  oklch(0.76 0.11 190);
  --primary-fg:     oklch(0.16 0.02 220);
  --primary-soft:   oklch(0.25 0.05 190);
  --primary-softer: oklch(0.2 0.03 190);
  --primary-border: oklch(0.38 0.07 190);
  --navy:           oklch(0.8 0.05 250);
  --accent-soft:    oklch(0.25 0.06 60);

  --green-soft:  oklch(0.22 0.06 152);
  --amber-soft:  oklch(0.24 0.06 80);
  --red-soft:    oklch(0.24 0.06 25);
  --indigo-soft: oklch(0.24 0.06 285);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.35), 0 8px 20px -4px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 20px 40px -8px rgba(0,0,0,.6);
  --ring:      0 0 0 3px oklch(0.7 0.11 190 / 0.3);
  color-scheme: dark;
}

html { font-size: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
::selection { background: var(--primary-soft); }