/*
  Vendored from ../design-system/tokens.css. Re-copy from there when
  the design system changes; don't edit primitives here directly.

  Token layers, following the primitive -> semantic -> component
  convention used by systems like Primer and Polaris:

    primitive  raw values, theme-dependent (--ds-prim-*)
    semantic   what a value means in context, theme-independent
               name (--ds-color-*, --ds-space-*, --ds-text-*)
    component  defined in components.css, reference semantic tokens

  Per-project settings (the only things a project changes):
    accent       edit --ds-prim-accent below, dark and light
    greys        <html data-greys="cool"> for blue-tinted neutrals,
                 omit for the default warm neutrals
    density      <html data-density="compact"> for tighter rows and
                 controls, omit for the default comfortable spacing
  Run check-contrast.py against the edited file before shipping a new
  accent. Record the project in the Projects table in docs/index.html.
*/

:root {
  color-scheme: dark;

  /* -- primitives: dark (default) -- */
  --ds-prim-neutral-0: #0a0a0a;
  --ds-prim-neutral-1: #141414;
  --ds-prim-neutral-2: #1a1a1a;
  --ds-prim-neutral-3: #262626;
  --ds-prim-neutral-4: #666666;
  --ds-prim-neutral-5: #5c5c5c;
  --ds-prim-neutral-6: #8a8a8a;
  --ds-prim-neutral-7: #ededed;
  --ds-prim-accent: #6a8fb0;
  --ds-prim-positive: #6fae7f;
  --ds-prim-negative: #c47a6b;
  --ds-prim-warning: #e0904f;

  /* -- semantic color -- */
  --ds-color-bg: var(--ds-prim-neutral-0);
  --ds-color-bg-raised: var(--ds-prim-neutral-1);
  --ds-color-bg-overlay: var(--ds-prim-neutral-2);
  --ds-color-border: var(--ds-prim-neutral-3);
  --ds-color-border-strong: var(--ds-prim-neutral-4);
  /* faint fails 4.5:1 on purpose: disabled text and decoration only */
  --ds-color-text-faint: var(--ds-prim-neutral-5);
  --ds-color-text-muted: var(--ds-prim-neutral-6);
  --ds-color-text: var(--ds-prim-neutral-7);

  /* accent: hover/active/subtle derive from the one primitive, mixing
     toward the text color so they lighten in dark and darken in light */
  --ds-color-accent: var(--ds-prim-accent);
  --ds-color-accent-hover: color-mix(in srgb, var(--ds-prim-accent) 85%, var(--ds-prim-neutral-7));
  --ds-color-accent-active: color-mix(in srgb, var(--ds-prim-accent) 70%, var(--ds-prim-neutral-7));
  --ds-color-accent-subtle: color-mix(in srgb, var(--ds-prim-accent) 14%, transparent);
  --ds-color-accent-contrast: var(--ds-prim-neutral-0);

  /* positive/negative: a value went up or down, nothing else */
  --ds-color-positive: var(--ds-prim-positive);
  --ds-color-negative: var(--ds-prim-negative);

  /* status: outcome of an action or state of a thing */
  --ds-color-success: var(--ds-prim-positive);
  --ds-color-warning: var(--ds-prim-warning);
  --ds-color-danger: var(--ds-prim-negative);

  /* -- semantic spacing, 8px base, with two half steps -- */
  --ds-space-half: 4px;
  --ds-space-1: 8px;
  --ds-space-1-5: 12px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-space-5: 48px;
  --ds-space-6: 64px;
  --ds-space-7: 96px;

  /* -- density: comfortable (default). data-density="compact" below -- */
  --ds-row-pad-y: var(--ds-space-1);
  --ds-cell-pad-y: var(--ds-space-1-5);
  --ds-control-pad-y: var(--ds-space-1);

  /* -- semantic shape and size -- */
  --ds-radius: 6px;
  --ds-border-width: 1px;
  --ds-focus-ring: 2px solid var(--ds-color-accent);
  --ds-focus-offset: 2px;
  --ds-control-size: 32px;
  --ds-topbar-height: 56px;

  /* -- semantic type -- */
  --ds-font-display: "IBM Plex Serif", -apple-system, serif;
  --ds-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ds-text-display: clamp(1.8rem, 5vw, 3rem);
  --ds-text-heading: clamp(1.15rem, 2vw, 1.4rem);
  --ds-text-subheading: 1rem;
  --ds-text-body: 1rem;
  --ds-text-small: 0.86rem;
  --ds-text-caption: 0.84rem;
  --ds-text-label: 0.78rem;
  --ds-text-micro: 0.68rem;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-leading-tight: 1.15;
  --ds-leading-snug: 1.3;
  --ds-leading-body: 1.6;
  --ds-tracking-label: 0.08em;

  /* -- semantic motion -- */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);

  /* -- semantic layering -- */
  --ds-z-sticky: 10;
  --ds-z-overlay: 20;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ds-prim-neutral-0: #fafaf8;
    --ds-prim-neutral-1: #f1efe9;
    --ds-prim-neutral-2: #ffffff;
    --ds-prim-neutral-3: #dedad2;
    --ds-prim-neutral-4: #8a857b;
    --ds-prim-neutral-5: #a19c93;
    --ds-prim-neutral-6: #6b6b6b;
    --ds-prim-neutral-7: #141414;
    --ds-prim-accent: #3e6a8f;
    --ds-prim-positive: #4b7d5b;
    --ds-prim-negative: #a3503f;
    --ds-prim-warning: #9c5a16;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ds-prim-neutral-0: #fafaf8;
  --ds-prim-neutral-1: #f1efe9;
  --ds-prim-neutral-2: #ffffff;
  --ds-prim-neutral-3: #dedad2;
  --ds-prim-neutral-4: #8a857b;
  --ds-prim-neutral-5: #a19c93;
  --ds-prim-neutral-6: #6b6b6b;
  --ds-prim-neutral-7: #141414;
  --ds-prim-accent: #3e6a8f;
  --ds-prim-positive: #4b7d5b;
  --ds-prim-negative: #a3503f;
  --ds-prim-warning: #9c5a16;
}

/* -- greys: cool. Neutrals only; accent and status colors are unchanged.
   Light blocks carry one more attribute so they win over the dark one. -- */

:root[data-greys="cool"] {
  --ds-prim-neutral-0: #0a0b0d;
  --ds-prim-neutral-1: #121418;
  --ds-prim-neutral-2: #181b20;
  --ds-prim-neutral-3: #23272e;
  --ds-prim-neutral-4: #626873;
  --ds-prim-neutral-5: #565c66;
  --ds-prim-neutral-6: #868c96;
  --ds-prim-neutral-7: #e9ecf0;
}

@media (prefers-color-scheme: light) {
  :root[data-greys="cool"]:not([data-theme="dark"]) {
    --ds-prim-neutral-0: #f8f9fb;
    --ds-prim-neutral-1: #eef0f4;
    --ds-prim-neutral-2: #ffffff;
    --ds-prim-neutral-3: #d8dce3;
    --ds-prim-neutral-4: #838995;
    --ds-prim-neutral-5: #9aa0aa;
    --ds-prim-neutral-6: #626873;
    --ds-prim-neutral-7: #12151a;
  }
}

:root[data-greys="cool"][data-theme="light"] {
  --ds-prim-neutral-0: #f8f9fb;
  --ds-prim-neutral-1: #eef0f4;
  --ds-prim-neutral-2: #ffffff;
  --ds-prim-neutral-3: #d8dce3;
  --ds-prim-neutral-4: #838995;
  --ds-prim-neutral-5: #9aa0aa;
  --ds-prim-neutral-6: #626873;
  --ds-prim-neutral-7: #12151a;
}

/* -- density: compact. Half a step less air in rows, cells, controls. -- */

:root[data-density="compact"] {
  --ds-row-pad-y: var(--ds-space-half);
  --ds-cell-pad-y: var(--ds-space-1);
  --ds-control-pad-y: var(--ds-space-half);
}