/*
 * Base kit: the neutral defaults every piece demo uses. Not a brand. A tool or client site swaps in its own kit
 * (same --dl-* names, its own values) and every piece restyles with it; that is what "make it ours" means here.
 *
 * Chosen to avoid the rulebook's default looks (studio/design/anti-slop.md section 1): no cream + clay, no near-black
 * + acid accent, no broadsheet, no SaaS card wash, no stock Tailwind hexes. System fonts, so demos work offline and
 * carry no unexamined web font.
 *
 * Contrast (WCAG 2 relative luminance, measured 2026-09-27; on --dl-surface / on --dl-surface-raised):
 *   light: ink 16.7 / 17.8, ink-muted 7.8 / 8.2, ink-faint 5.0 / 5.3, line-strong 3.3 / 3.5, accent 6.7 / 7.1,
 *          critical 6.2 / 6.6; white on accent 7.1
 *   dark:  ink 15.2 / 13.8, ink-muted 8.9 / 8.1, ink-faint 5.9 / 5.4, line-strong 3.9 / 3.5, accent 7.6 / 6.9,
 *          critical 6.6 / 6.0; on-accent on accent 7.5
 *
 * Theme: light leads. Dark follows the system setting unless the page sets data-theme="light", and can be forced
 * with data-theme="dark" (the preview site's toggle sets it).
 */

:root {
  color-scheme: light;

  /* Surfaces and ink */
  --dl-surface: #f8f8f6;
  --dl-surface-raised: #ffffff;
  --dl-surface-sunken: #efefeb;
  --dl-ink: #16181b;
  --dl-ink-muted: #4a4f57;
  --dl-ink-faint: #666c76;
  --dl-line: #dcdcd6;
  --dl-line-strong: #848a93;

  /* One accent, used for the one main action and the current item. */
  --dl-accent: #1c5d86;
  --dl-accent-strong: #134866;
  --dl-on-accent: #ffffff;
  --dl-accent-quiet: #e3edf3;
  --dl-critical: #b0282f;
  --dl-critical-wash: #f9e7e8;
  --dl-focus-ring: #16181b;
  --dl-focus-halo: #ffffff;

  /* Status (added 2026-09-28): like Studio's registry for the Pulse, success and warning carry no hue. Status is a
     word and an icon; only critical has a color, and red means a problem (anti-slop section 3). */
  --dl-success: var(--dl-ink-muted);
  --dl-warning: var(--dl-ink);

  /* Background and shader palette: four stops a gradient, shader or 3D scene reads with getComputedStyle. */
  --dl-shade-1: #1c5d86;
  --dl-shade-2: #2f8f83;
  --dl-shade-3: #d9a441;
  --dl-shade-4: #f8f8f6;

  /* Data series (charts inside pieces), ordered. data-4 is the gray for "Other". Re-stepped 2026-09-28: the old four
     failed the dataviz palette check, and blue and violet merged for deuteranopes. Every pair now stays at least 15.2
     apart (CIE76, with full vision and each color-vision type; tests/kits.test.mjs). The accent is not a series. */
  --dl-data-1: #1f6fb2;
  --dl-data-2: #c0621f;
  --dl-data-3: #9b2f5f;
  --dl-data-4: #7c828a;
  --dl-area-opacity: 0.1; /* the wash under a single line */

  /* Type */
  --dl-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dl-font-head: var(--dl-font-text);
  /* An Arabic face for mixed English and Arabic text (2026-09-29, decision row "Story reports"). A kit that shows Arabic
     puts its Arabic face in its own --dl-font-text before the generic family, so the browser falls back to it glyph by
     glyph ("Public Sans", "IBM Plex Sans Arabic", system-ui, sans-serif); this token names it for pieces that set a
     whole block in Arabic. */
  --dl-font-arabic: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
  --dl-font-code: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --dl-text-xs: 0.75rem; /* axis labels, units, "was 8.9" notes */
  --dl-text-sm: 0.875rem;
  --dl-text-md: 1rem;
  --dl-text-lg: 1.25rem;
  --dl-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --dl-text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --dl-text-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  --dl-leading-tight: 1.15;
  --dl-leading-normal: 1.55;
  --dl-tracking-head: -0.015em;
  --dl-weight-regular: 400;
  --dl-weight-strong: 600;

  /* Space */
  --dl-space-1: 4px;
  --dl-space-2: 8px;
  --dl-space-3: 12px;
  --dl-space-4: 16px;
  --dl-space-5: 24px;
  --dl-space-6: 32px;
  --dl-space-7: 48px;
  --dl-space-8: 64px;
  --dl-space-9: 96px;

  /* Shape */
  --dl-radius-none: 0;
  --dl-radius-control: 6px;
  --dl-radius-float: 12px;
  --dl-radius-round: 999px;
  --dl-border: 1px;
  --dl-shadow-float: 0 1px 2px rgb(22 24 27 / 0.08), 0 8px 24px rgb(22 24 27 / 0.12);
  --dl-shadow-tray: 0 2px 4px rgb(22 24 27 / 0.1), 0 16px 48px rgb(22 24 27 / 0.18);

  /* Motion: pieces read these, so a kit can make a whole site calmer or livelier in one place. */
  --dl-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dl-ease-anime: outQuart;
  --dl-duration-1: 120ms;
  --dl-duration-2: 240ms;
  --dl-duration-3: 420ms;
  --dl-duration-4: 720ms;
  --dl-stagger: 60ms;
  --dl-distance: 24px;

  /* Layout */
  --dl-measure: 66ch;
  --dl-content-max: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dl-surface: #15181c;
    --dl-surface-raised: #1d2126;
    --dl-surface-sunken: #101215;
    --dl-ink: #ecedee;
    --dl-ink-muted: #b3b8bf;
    --dl-ink-faint: #8f959e;
    --dl-line: #2c3137;
    --dl-line-strong: #6f767f;
    --dl-accent: #6fb0dc;
    --dl-accent-strong: #93c5e8;
    --dl-on-accent: #0c1a24;
    --dl-accent-quiet: #1b2b37;
    --dl-critical: #f07a7f;
    --dl-critical-wash: #3a1c1f;
    --dl-focus-ring: #ecedee;
    --dl-focus-halo: #15181c;
    --dl-shade-1: #6fb0dc;
    --dl-shade-2: #4fb3a5;
    --dl-shade-3: #e0b35c;
    --dl-shade-4: #15181c;
    --dl-data-1: #4f98dc;
    --dl-data-2: #cf7a3a;
    --dl-data-3: #ae689a;
    --dl-data-4: #b3b8bf;
    --dl-shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
    --dl-shadow-tray: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 48px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --dl-surface: #15181c;
  --dl-surface-raised: #1d2126;
  --dl-surface-sunken: #101215;
  --dl-ink: #ecedee;
  --dl-ink-muted: #b3b8bf;
  --dl-ink-faint: #8f959e;
  --dl-line: #2c3137;
  --dl-line-strong: #6f767f;
  --dl-accent: #6fb0dc;
  --dl-accent-strong: #93c5e8;
  --dl-on-accent: #0c1a24;
  --dl-accent-quiet: #1b2b37;
  --dl-critical: #f07a7f;
  --dl-critical-wash: #3a1c1f;
  --dl-focus-ring: #ecedee;
  --dl-focus-halo: #15181c;
  --dl-shade-1: #6fb0dc;
  --dl-shade-2: #4fb3a5;
  --dl-shade-3: #e0b35c;
  --dl-shade-4: #15181c;
  --dl-data-1: #4f98dc;
  --dl-data-2: #cf7a3a;
  --dl-data-3: #ae689a;
  --dl-data-4: #b3b8bf;
  --dl-shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
  --dl-shadow-tray: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 48px rgb(0 0 0 / 0.5);
}

/* Demo page defaults: every piece's index.html uses <body class="dl-demo">. */
.dl-demo {
  margin: 0;
  min-height: 100vh;
  background: var(--dl-surface);
  color: var(--dl-ink);
  font: var(--dl-weight-regular) var(--dl-text-md) / var(--dl-leading-normal) var(--dl-font-text);
}

.dl-num {
  font-variant-numeric: tabular-nums;
}

.dl-demo :focus-visible {
  outline: 2px solid var(--dl-focus-ring);
  outline-offset: 2px;
}

/* Demo framing, for index.html pages only (pieces never depend on these):
   dl-demo--stage centers a small piece on the page, the way a catalog shows it;
   dl-demo--fill lets a full-bleed piece (a background) fill the first screen. */
.dl-demo--stage {
  display: grid;
  grid-template-columns: minmax(0, min(100%, 960px));
  justify-content: center;
  align-content: center;
  padding: var(--dl-space-7) var(--dl-space-5);
  box-sizing: border-box;
}

.dl-demo--fill > [data-dl] {
  min-height: 100vh;
}