/* ============================================================
   Design tokens — dev-cms4 palette, ported value for value.
   Inter typography, cms4's neutral grey scale, graphite primary action,
   blue as the single accent (links / info / focus on dark / charts),
   status pills as bg/text/dot triplets. Light + dark via light-dark().
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* cms4 has no brand colour. Blue is its single accent — links, info, focus
     on dark surfaces, charts. Emphasis comes from graphite, not from hue. */
  --accent: light-dark(#2563eb, #60a5fa);
  --accent-hover: light-dark(#1d4ed8, #93c5fd);
  --accent-active: light-dark(#1e40af, #bfdbfe);
  --accent-soft: light-dark(#eff6ff, color-mix(in srgb, #3b82f6 18%, transparent));
  --on-accent: #ffffff;

  /* Primary action — graphite, per cms4. */
  --primary: light-dark(rgb(80, 80, 80), #a3a3a3);
  --primary-hover: light-dark(rgb(53, 53, 53), #d4d4d4);
  --on-primary: light-dark(#ffffff, #171717);

  /* Links / info — blue. */
  --link: light-dark(#2563eb, #60a5fa);
  --link-hover: light-dark(#1d4ed8, #93c5fd);
  /* Focus follows cms4: graphite in light, blue on dark surfaces where the
     graphite would not carry enough contrast. */
  --focus: light-dark(rgb(80, 80, 80), #60a5fa);

  /* Surfaces */
  --bg: light-dark(#f5f5f5, #121212);
  --surface: light-dark(#ffffff, #1a1a1a);
  --surface-2: light-dark(#fafafa, #242424);
  --surface-hover: light-dark(#fafafa, #2d2d2d);
  --border: light-dark(#ebebeb, #2d2d2d);
  --border-strong: light-dark(#d4d4d4, #4d4d4d);
  --table-head: light-dark(#efefef, #242424);
  --input-bg: light-dark(#ffffff, #2d2d2d);

  /* Sidebar */
  --sidebar-bg: light-dark(#ebebeb, #1e1e1e);
  --sidebar-item-hover: light-dark(#f4f4f4, #262626);
  --sidebar-item-active: light-dark(#ffffff, #2d2d2d);

  /* Topbar — a dark chrome bar in both themes, per cms4. */
  --topbar-h: 3rem;
  --topbar-bg: light-dark(#292929, #0d0d0d);
  --topbar-bg-bright: light-dark(#3a3a3a, #1f1f1f);
  --topbar-text: light-dark(#ffffff, #e5e5e5);
  --topbar-text-muted: light-dark(#d4d4d4, #a0a0a0);
  --topbar-border: rgb(255 255 255 / 0.1);
  --topbar-hover-bg: rgb(255 255 255 / 0.1);
  /* The bar stays dark in light mode too, where the graphite focus ring all but
     disappears against it — so up here the ring is always the blue one. */
  --topbar-focus-ring: 0 0 0 3px rgb(96 165 250 / 0.45);

  /* Text */
  --text: light-dark(#171717, #e5e5e5);
  --text-muted: light-dark(#737373, #a0a0a0);
  --text-faint: light-dark(#5c5c66, #8c8c8c);

  /* Velvet — product attributes (variations). Distinct from both the status
     palette and the brand accent, so a colour never means two things. */
  --velvet-soft: light-dark(#f1ebfa, #2a2137);
  --velvet-text: light-dark(#6d28d9, #c4b5fd);

  /* Feedback */
  --success: light-dark(#15803d, #4ade80);
  --success-soft: light-dark(#dcfce7, #14351f);
  --danger: light-dark(#b91c1c, #f87171);
  --danger-soft: light-dark(#fee2e2, #3a1717);

  /* Status pill triplets (bg / text / dot) */
  --st-active-bg: light-dark(#dcfce7, #14351f);
  --st-active-text: light-dark(#15803d, #86efac);
  --st-active-dot: light-dark(#22c55e, #4ade80);
  --st-pending-bg: light-dark(#fef3c7, #3a2c0d);
  --st-pending-text: light-dark(#b45309, #fcd34d);
  --st-pending-dot: light-dark(#f59e0b, #fbbf24);
  --st-draft-bg: light-dark(#f5f5f5, #333333);
  --st-draft-text: light-dark(#404040, #b0b0b0);
  --st-draft-dot: light-dark(#737373, #a0a0a0);
  --st-info-bg: light-dark(#dbeafe, #16283e);
  --st-info-text: light-dark(#1d4ed8, #93c5fd);
  --st-info-dot: light-dark(#3b82f6, #60a5fa);
  --st-danger-bg: light-dark(#fee2e2, #3a1717);
  --st-danger-text: light-dark(#b91c1c, #fca5a5);
  --st-danger-dot: light-dark(#ef4444, #f87171);

  /* Typography */
  --font-sans: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --leading: 1.5;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape — cms4 scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Elevation */
  --shadow-1: light-dark(0 1px 2px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.4));
  --shadow-2: light-dark(0 12px 32px rgb(0 0 0 / 0.12), 0 12px 32px rgb(0 0 0 / 0.5));

  /* Charts — validated per-mode (dataviz lightness band + contrast) */
  --chart-1: light-dark(#2563eb, #60a5fa);

  /* Focus */
  --focus-ring: 0 0 0 3px light-dark(rgb(80 80 80 / 0.25), rgb(96 165 250 / 0.3));

  /* Controls */
  --control-h: 30px;
}