/*
 * The kit's own face: one neutral palette, light and dark, so a page renders
 * with no design at all. This is what the dock's screen wears, and what a
 * mock wears before its design exists.
 *
 * Layered, so a design's unlayered tokens.css replaces it slot for slot with
 * no specificity trick. Three declarations and each is needed: the light
 * palette at the bare root, the dark one under the system preference for a
 * page that has chosen nothing, and the dark one again under an explicit
 * data-theme so a chosen theme wins in both directions.
 *
 * Every pairing here clears 4.5:1 for body text and 3:1 for a focus ring
 * against both of its neighbours. --nv-color-fg-subtle is the one exception
 * by design: it is for rules, disabled glyphs and decoration, never for text
 * a reader must read.
 */

@layer nv.tokens {
  :root {
    color-scheme: light;

    --nv-color-bg: #ffffff;
    --nv-color-bg-raised: #f7f7f8;
    --nv-color-bg-raised-hover: #f0f0f2;
    --nv-color-bg-raised-strong: #e8e8ec;
    --nv-color-bg-sunken: #f2f2f4;
    --nv-color-bg-overlay: rgb(20 20 24 / 45%);

    --nv-color-fg: #16161a;
    --nv-color-fg-body: #3a3a42;
    --nv-color-fg-muted: #5f5f6a;
    --nv-color-fg-subtle: #8a8a94;
    --nv-color-fg-on-accent: #ffffff;

    --nv-color-border: #e2e2e6;
    --nv-color-border-strong: #c9c9d0;
    --nv-color-border-focus: #2559c8;

    --nv-color-accent: #2559c8;
    --nv-color-accent-hover: #1d47a3;
    --nv-color-accent-active: #163a86;
    --nv-color-accent-subtle: rgb(37 89 200 / 10%);

    --nv-color-success: #0f7052;
    --nv-color-success-subtle: rgb(15 112 82 / 12%);
    --nv-color-warning: #8a5200;
    --nv-color-warning-subtle: rgb(138 82 0 / 12%);
    --nv-color-danger: #b32020;
    --nv-color-danger-subtle: rgb(179 32 32 / 12%);
    --nv-color-info: #4a4a55;
    --nv-color-info-subtle: rgb(74 74 85 / 10%);

    --nv-color-scroll-thumb: #c9c9d0;
    --nv-color-scroll-thumb-hover: #a5a5b0;

    --nv-shadow-sm: 0 1px 2px rgb(16 16 20 / 8%);
    --nv-shadow-md: 0 4px 10px rgb(16 16 20 / 10%);
    --nv-shadow-lg: 0 10px 24px rgb(16 16 20 / 12%);
    --nv-shadow-xl: 0 24px 48px rgb(16 16 20 / 16%);
    --nv-shadow-focus: 0 0 0 3px rgb(37 89 200 / 28%);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      color-scheme: dark;

      --nv-color-bg: #131317;
      --nv-color-bg-raised: #1b1b21;
      --nv-color-bg-raised-hover: #212129;
      --nv-color-bg-raised-strong: #292932;
      --nv-color-bg-sunken: #0e0e11;
      --nv-color-bg-overlay: rgb(8 8 10 / 65%);

      --nv-color-fg: #f2f2f5;
      --nv-color-fg-body: #c9c9d2;
      --nv-color-fg-muted: #9a9aa6;
      --nv-color-fg-subtle: #6c6c78;
      --nv-color-fg-on-accent: #0e0e11;

      --nv-color-border: #2c2c35;
      --nv-color-border-strong: #3d3d48;
      --nv-color-border-focus: #8ab0ff;

      --nv-color-accent: #8ab0ff;
      --nv-color-accent-hover: #a6c3ff;
      --nv-color-accent-active: #6d97ea;
      --nv-color-accent-subtle: rgb(138 176 255 / 14%);

      --nv-color-success: #55c496;
      --nv-color-success-subtle: rgb(85 196 150 / 14%);
      --nv-color-warning: #e0a33c;
      --nv-color-warning-subtle: rgb(224 163 60 / 14%);
      --nv-color-danger: #ff7b7b;
      --nv-color-danger-subtle: rgb(255 123 123 / 14%);
      --nv-color-info: #a8a8b4;
      --nv-color-info-subtle: rgb(168 168 180 / 12%);

      --nv-color-scroll-thumb: #3d3d48;
      --nv-color-scroll-thumb-hover: #5a5a68;

      --nv-shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);
      --nv-shadow-md: 0 4px 10px rgb(0 0 0 / 55%);
      --nv-shadow-lg: 0 10px 24px rgb(0 0 0 / 60%);
      --nv-shadow-xl: 0 24px 48px rgb(0 0 0 / 70%);
      --nv-shadow-focus: 0 0 0 3px rgb(138 176 255 / 32%);
    }
  }

  :root[data-theme='dark'] {
    color-scheme: dark;

    --nv-color-bg: #131317;
    --nv-color-bg-raised: #1b1b21;
    --nv-color-bg-raised-hover: #212129;
    --nv-color-bg-raised-strong: #292932;
    --nv-color-bg-sunken: #0e0e11;
    --nv-color-bg-overlay: rgb(8 8 10 / 65%);

    --nv-color-fg: #f2f2f5;
    --nv-color-fg-body: #c9c9d2;
    --nv-color-fg-muted: #9a9aa6;
    --nv-color-fg-subtle: #6c6c78;
    --nv-color-fg-on-accent: #0e0e11;

    --nv-color-border: #2c2c35;
    --nv-color-border-strong: #3d3d48;
    --nv-color-border-focus: #8ab0ff;

    --nv-color-accent: #8ab0ff;
    --nv-color-accent-hover: #a6c3ff;
    --nv-color-accent-active: #6d97ea;
    --nv-color-accent-subtle: rgb(138 176 255 / 14%);

    --nv-color-success: #55c496;
    --nv-color-success-subtle: rgb(85 196 150 / 14%);
    --nv-color-warning: #e0a33c;
    --nv-color-warning-subtle: rgb(224 163 60 / 14%);
    --nv-color-danger: #ff7b7b;
    --nv-color-danger-subtle: rgb(255 123 123 / 14%);
    --nv-color-info: #a8a8b4;
    --nv-color-info-subtle: rgb(168 168 180 / 12%);

    --nv-color-scroll-thumb: #3d3d48;
    --nv-color-scroll-thumb-hover: #5a5a68;

    --nv-shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);
    --nv-shadow-md: 0 4px 10px rgb(0 0 0 / 55%);
    --nv-shadow-lg: 0 10px 24px rgb(0 0 0 / 60%);
    --nv-shadow-xl: 0 24px 48px rgb(0 0 0 / 70%);
    --nv-shadow-focus: 0 0 0 3px rgb(138 176 255 / 32%);
  }
}