/* GENERATED by packages/tokens/build.mjs (Style Dictionary) from packages/tokens/src/signal.json. Do not edit; edit the source. */
/*
 * code900 Signal design tokens, v1.0.0
 * The single source of design values for the Signal design system. Vendor this file pinned; never hot-link it.
 *
 * Names are category-first with the ds- prefix: --ds-color-*, --ds-font-*, --ds-line-height-*, --ds-space-*,
 * --ds-size-*, --ds-radius-*, --ds-shadow-*. (Renamed in v1.0.0; map: fixtures/renames-1.0.json.)
 * Layers: primitives (--ds-color-<hue>-<step>) → semantic (--ds-color-bg, --ds-color-brand, …) → components (components.css).
 * Apps and themes override SEMANTIC tokens only (see themes/theme-arki.css), never primitives.
 *
 * Mode: follows the device (prefers-color-scheme). An app may force a mode with
 * <html data-theme="light|dark">. The dark values appear twice (media query + data-theme);
 * tools/check-contrast.mjs fails if the two copies drift.
 *
 * Strict-CSP safe: plain custom properties, no url(), no external hosts, system fonts only.
 */

:root {
  color-scheme: light dark;

  /* ---- Primitives: color ---- */
  --ds-color-gray-0: #ffffff;
  --ds-color-gray-50: #f5f6f8;
  --ds-color-gray-100: #eef1f5;
  --ds-color-gray-200: #dde1e7;
  --ds-color-gray-400: #7a8494;
  --ds-color-gray-600: #5b6470;
  --ds-color-gray-950: #14171c;

  --ds-color-ink-50: #e8eaed;
  --ds-color-ink-400: #8b93a7;
  --ds-color-ink-500: #5a6474;
  --ds-color-ink-700: #232a38;
  --ds-color-ink-850: #161b26;
  --ds-color-ink-900: #11141b;
  --ds-color-ink-950: #0a0c10;

  --ds-color-blue-50: #eef3fd;
  --ds-color-blue-200: #b9c9f2;
  --ds-color-blue-300: #8fb4ff;
  --ds-color-blue-400: #4f8cff;
  --ds-color-blue-600: #2a5bd7;
  --ds-color-blue-800: #2c4a80;
  --ds-color-blue-900: #121c30;
  --ds-color-blue-950: #07101f;

  --ds-color-mint-400: #23d18b;
  --ds-color-mint-700: #0e7a4f;
  --ds-color-amber-400: #f0a04b;
  --ds-color-amber-700: #a35a00;
  --ds-color-red-400: #ff6b6b;
  --ds-color-red-700: #b42318;

  /* ---- Primitives: type, space, shape (mode-independent) ---- */
  --ds-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  --ds-font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ds-font-size-xs: 0.75rem;   /* 12 — eyebrows, badges */
  --ds-font-size-sm: 0.875rem;  /* 14 — hints, secondary */
  --ds-font-size-md: 1rem;      /* 16 — body; inputs never smaller (prevents iOS zoom) */
  --ds-font-size-lg: 1.125rem;  /* 18 — card titles */
  --ds-font-size-xl: 1.5rem;    /* 24 — page titles on phones */
  --ds-font-size-2xl: 2rem;     /* 32 — display */
  --ds-line-height: 1.55;
  --ds-line-height-tight: 1.15;

  --ds-space-1: 0.25rem;   /* 4 */
  --ds-space-2: 0.5rem;    /* 8 */
  --ds-space-3: 0.75rem;   /* 12 */
  --ds-space-4: 1rem;      /* 16 */
  --ds-space-5: 1.5rem;    /* 24 */
  --ds-space-6: 2rem;      /* 32 */
  --ds-space-7: 3rem;      /* 48 */
  --ds-space-8: 4rem;      /* 64 */

  --ds-size-tap: 2.75rem;       /* 44px minimum target */
  --ds-size-wrap: 72rem;        /* page max width */
  --ds-size-measure: 65ch;      /* comfortable line length */
  --ds-radius-pill: 999px;

  /* ---- Semantic: tenant-overridable (the "brand set") ---- */
  --ds-radius-control: 10px;       /* controls */
  --ds-radius-card: 14px;  /* cards, panels */

  /* ---- Semantic: LIGHT (default) ---- */
  --ds-color-bg: var(--ds-color-gray-50);
  --ds-color-surface: var(--ds-color-gray-0);
  --ds-color-surface-raised: var(--ds-color-gray-100);
  --ds-color-text: var(--ds-color-gray-950);
  --ds-color-text-muted: var(--ds-color-gray-600);
  --ds-color-border: var(--ds-color-gray-200);         /* decorative dividers only */
  --ds-color-border-strong: var(--ds-color-gray-400);  /* inputs, control edges: >= 3:1 */
  --ds-color-brand: var(--ds-color-blue-600);
  --ds-color-on-brand: var(--ds-color-gray-0);
  --ds-color-brand-text: var(--ds-color-blue-600);     /* links, text-colored brand */
  --ds-color-brand-tint: var(--ds-color-blue-50);
  --ds-color-brand-tint-border: var(--ds-color-blue-200);
  --ds-color-focus: var(--ds-color-blue-600);
  --ds-color-success: var(--ds-color-mint-700);
  --ds-color-warning: var(--ds-color-amber-700);
  --ds-color-danger: var(--ds-color-red-700);
  --ds-shadow-popover: 0 12px 32px rgb(20 23 28 / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-color-bg: var(--ds-color-ink-950);
    --ds-color-surface: var(--ds-color-ink-900);
    --ds-color-surface-raised: var(--ds-color-ink-850);
    --ds-color-text: var(--ds-color-ink-50);
    --ds-color-text-muted: var(--ds-color-ink-400);
    --ds-color-border: var(--ds-color-ink-700);
    --ds-color-border-strong: var(--ds-color-ink-500);
    --ds-color-brand: var(--ds-color-blue-400);
    --ds-color-on-brand: var(--ds-color-blue-950);
    --ds-color-brand-text: var(--ds-color-blue-400);
    --ds-color-brand-tint: var(--ds-color-blue-900);
    --ds-color-brand-tint-border: var(--ds-color-blue-800);
    --ds-color-focus: var(--ds-color-blue-300);
    --ds-color-success: var(--ds-color-mint-400);
    --ds-color-warning: var(--ds-color-amber-400);
    --ds-color-danger: var(--ds-color-red-400);
    --ds-shadow-popover: 0 12px 32px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-color-bg: var(--ds-color-ink-950);
  --ds-color-surface: var(--ds-color-ink-900);
  --ds-color-surface-raised: var(--ds-color-ink-850);
  --ds-color-text: var(--ds-color-ink-50);
  --ds-color-text-muted: var(--ds-color-ink-400);
  --ds-color-border: var(--ds-color-ink-700);
  --ds-color-border-strong: var(--ds-color-ink-500);
  --ds-color-brand: var(--ds-color-blue-400);
  --ds-color-on-brand: var(--ds-color-blue-950);
  --ds-color-brand-text: var(--ds-color-blue-400);
  --ds-color-brand-tint: var(--ds-color-blue-900);
  --ds-color-brand-tint-border: var(--ds-color-blue-800);
  --ds-color-focus: var(--ds-color-blue-300);
  --ds-color-success: var(--ds-color-mint-400);
  --ds-color-warning: var(--ds-color-amber-400);
  --ds-color-danger: var(--ds-color-red-400);
  --ds-shadow-popover: 0 12px 32px rgb(0 0 0 / 0.45);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ---- Density: comfortable (default) or compact ----
 * <html data-density="compact"> tightens a whole page; data-density="compact" on any element tightens just that area
 * (e.g. a construction-log table). Only spacing and line height change: type sizes stay readable and --ds-size-tap
 * (the tap target) never shrinks. */
[data-density="compact"] {
  --ds-space-3: 0.5rem;    /* 12 → 8 */
  --ds-space-4: 0.75rem;   /* 16 → 12 */
  --ds-space-5: 1rem;      /* 24 → 16 */
  --ds-space-6: 1.5rem;    /* 32 → 24 */
  --ds-space-7: 2rem;      /* 48 → 32 */
  --ds-space-8: 3rem;      /* 64 → 48 */
  --ds-line-height: 1.4;
}