/* Klarion Design System — design tokens v1.0
   Dark theme is the default. Add data-theme="light" on <html> to switch. */

:root{
  /* ---- Brand ---- */
  --k-blue:#0B98D5;        /* CANONICAL primary — buttons, links, active, focus (app + brand). Do not add another blue. */
  --k-blue-hover:#0A82B8;
  --k-blue-active:#0670A0;
  --k-dark:#20283A;        /* brand surface */
  --k-ink:#060F1E;         /* deep navy — hero / cover backgrounds */

  /* ---- Semantic (full tint = text/icon) ---- */
  --success:#27C281;
  --warning:#E0A526;
  --critical:#E5484D;
  --info:#1FAFC6;
  --accent:#8B7BE8;
  --neutral:#7C8499;
  /* muted badge backgrounds (same hue ~14-18%) */
  --success-bg:rgba(39,194,129,.16);
  --warning-bg:rgba(224,165,38,.16);
  --critical-bg:rgba(229,72,77,.16);
  --info-bg:rgba(31,175,198,.16);
  --accent-bg:rgba(139,123,232,.18);
  --neutral-bg:rgba(124,132,153,.18);

  /* ---- Typography ---- */
  --font:"Zalando Sans SemiExpanded","Inter","Segoe UI",system-ui,sans-serif;
  --fs-page-title:30px; --fw-page-title:700;
  --fs-stat:36px;       --fw-stat:700;
  --fs-section:19px;    --fw-section:600;
  --fs-subtitle:16px;   --fw-subtitle:600;
  --fs-body:14px;       --fw-body:400;
  --fs-label:12px;      --fw-label:500;
  --fs-th:11px;         --fw-th:600;   /* uppercase, letter-spacing .12em */
  --fs-badge:11px;      --fw-badge:600;/* uppercase, letter-spacing .04em */

  /* ---- Spacing (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --card-pad:22px; --gutter:18px; --cell-pad:14px;

  /* ---- Radii ---- */
  --r-card:14px; --r-control:9px; --r-pill:999px; --r-tile:11px;

  /* ---- Elevation (light theme) ---- */
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 4px 12px rgba(16,24,40,.08);
  --shadow-fab:0 10px 24px rgba(11,152,213,.45);

  /* ---- Theme: DARK (default) ---- */
  --bg:#161D2B; --surface:#20283A; --raised:#2A3447; --border:#38445C;
  --text:#F4F7FB; --text-2:#9DAAC0; --text-3:#6A788F;
  --focus-ring:0 0 0 3px rgba(11,152,213,.55);
}

:root[data-theme="light"]{
  --bg:#F3F6FB; --surface:#FFFFFF; --raised:#EDF1F7; --border:#E3E8F1;
  --text:#1A2230; --text-2:#55617A; --text-3:#8A93A6;
}