/* Ported from Artiq's client-portal design system
   (~/Downloads/Design-system preview review_files/_ds_bundle.css).
   Values only — copied as data, not as code. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-variable-latin.woff2') format('woff2-variations'),
       url('../assets/fonts/PlusJakartaSans-variable-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --color-paper: oklch(98.4% 0.003 248);
  --color-panel: oklch(99.3% 0.002 248);
  --color-paper-2: oklch(96.3% 0.008 254);
  --color-paper-3: oklch(95.8% 0.012 248);

  /* rules */
  --color-rule: oklch(84% 0.022 256);
  --color-rule-2: oklch(76% 0.026 254);

  /* text */
  --color-ink: oklch(23.5% 0.051 265);
  --color-muted: oklch(48.2% 0.053 259);
  --color-muted-2: oklch(48% 0.038 257);

  /* accent */
  --color-accent: oklch(47.8% 0.101 253);
  --color-accent-hover: oklch(42.1% 0.091 256);
  --color-accent-ink: oklch(99% 0.002 248);
  --color-accent-quiet: oklch(91.5% 0.035 248);
  --color-accent-2: oklch(64.5% 0.086 250);
  --color-focus: oklch(47.8% 0.101 253);

  /* status */
  --color-positive: oklch(59.6% 0.127 163);
  --color-positive-strong: oklch(52.2% 0.127 163);
  --color-negative: oklch(57.7% 0.215 27);
  --color-warn: oklch(76.9% 0.165 70);
  --color-warn-strong: oklch(54.8% 0.165 70);
  --color-control-border: oklch(65.6% 0.026 254);

  /* rail (dark sidebar) */
  --color-rail: oklch(21% 0.045 265);
  --color-rail-2: oklch(27% 0.05 265);
  --color-rail-3: oklch(31% 0.055 265);
  --color-rail-ink: oklch(97% 0.005 250);
  --color-rail-muted: oklch(72% 0.035 255);
  --color-rail-rule: oklch(33% 0.05 265);

  /* type */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* type scale, ported from the live app's tokens.css (not the earlier preview snapshot) */
  --text-2xs: 0.6875rem; /* 11px — meta, kbd */
  --text-xs: 0.75rem;    /* 12px — labels, table heads */
  --text-sm: 0.875rem;   /* 14px — app body */
  --text-md: 1rem;       /* 16px — prose */
  --text-lg: 1.25rem;    /* 20px — panel/section titles */
  --text-xl: 1.5625rem;  /* 25px — page titles */
  --text-2xl: 1.9531rem; /* 31px — greeting, lead figure */
  --tracking-display: -0.02em;
  --tracking-label: 0.06em;

  /* spacing scale, same source */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* radius */
  --radius-control: 8px;
  --radius-panel: 10px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-card: 0 1px 2px rgb(30 45 61 / 0.04), 0 1px 3px rgb(30 45 61 / 0.03);
  --shadow-card-hover: 0 2px 4px rgb(30 45 61 / 0.05), 0 8px 20px -6px rgb(30 45 61 / 0.10);
  --shadow-whisper: 0 1px 2px oklch(23.5% 0.051 265 / 0.06);
  /* live tailwind.config.js value, not the earlier preview snapshot's --shadow-pop */
  --shadow-pop: 0 4px 12px rgba(30, 45, 61, 0.10);
  --shadow-modal: 0 8px 24px rgba(30, 45, 61, 0.14);

  /* the 5-dot brand mark gradient, light -> dark (from ArtiqLogo/ArtiqMark) */
  --dot-1: oklch(74% 0.06 250);
  --dot-2: oklch(68% 0.075 251);
  --dot-3: oklch(62% 0.09 252);
  --dot-4: oklch(56% 0.1 253);
  --dot-5: var(--color-accent-hover);
}