/* InstantPalette - tokens (layer 1 of 4: tokens -> base -> site -> tool)
   Custom properties only. Shared by every page and every future tool.
   Neutral, achromatic chrome: every grey is R = G = B, so the swatches are the only hue on screen.
   Light is the bare :root. Dark is declared twice: once for the system preference (unless the user forced
   light with data-theme="light") and once for a forced data-theme="dark". Keep the two dark blocks identical. */

:root {
  /* Surfaces */
  --ground: #F3F3F3;      /* page, top bar, action bar, rails, content */
  --raised: #FFFFFF;      /* popovers, sheets, drawer, pills, chips, inputs, seam chips, cards, callouts */
  --sunken: #E8E8E8;      /* segmented track, selected option row, analogous sector in the scope */
  --hover:  #E6E6E6;      /* ghost button hover */
  --press:  #DCDCDC;      /* ghost button :active */
  /* Ink */
  --ink-1:  #161616;      /* primary text, 16.3:1 on ground */
  --ink-2:  #575757;      /* secondary text, 6.5:1 on ground, 7.2:1 on raised */
  --ink-3:  #8C8C8C;      /* non-text only: ticks, disabled glyphs, dashed borders, separators (3.0:1) */
  /* Lines */
  --line:   #DCDCDC;      /* hairlines */
  --line-2: #C4C4C4;      /* control borders (never the only cue for a control or a state) */
  /* The one filled control (Generate) */
  --primary: #161616;
  --on-primary: #FFFFFF;
  /* Misc */
  --ad-fill: transparent; /* production ad boxes are transparent; the "Advertisements" label stays */
  --scrim: rgb(0 0 0 / .38);
  --shadow-pop: 0 1px 2px rgb(0 0 0 / .06), 0 18px 44px -14px rgb(0 0 0 / .30);   /* popovers, drawer, modal, toasts */
  --shadow-chip: 0 1px 3px rgb(0 0 0 / .18);                                       /* seam chips only */
  --shadow-sheet: 0 -10px 40px rgb(0 0 0 / .25);                                   /* bottom sheets only */

  /* Type. "... Fallback" faces are size-adjusted local fonts declared in base.css (less reflow on swap). */
  --f-sans: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Shape */
  --r-xs: 4px;     /* ad boxes */
  --r-sm: 6px;     /* pills, stepper, seam chips, strips */
  --r: 8px;        /* buttons, inputs, cards, toasts */
  --r-lg: 12px;    /* popovers, modal, callouts, guide CTA, per-swatch hero */
  --r-sheet: 16px; /* bottom-sheet top corners */

  /* Bars */
  --top-h: 56px;   /* tool top bar and the site header */
  --act-h: 64px;   /* tool action bar */

  /* Rails */
  --rail-gutter: 48px;   /* empty ground between the tool and the rail divider */
  --rail-w: 381px;       /* 48 gutter + 1 divider + 16 + 300 ad + 16 */

  /* Reading measure */
  --measure: 72ch;

  /* Motion (the only durations allowed) */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Layers */
  --z-seam: 2; --z-tools: 3; --z-pop: 40; --z-toast: 60; --z-skip: 100;

  /* Martian Mono advance width (em) per width-axis value (wdth 100 / 87.5 / 75).
     UI.measureMono() replaces these at runtime with the real advance of whatever font actually rendered. */
  --adv-100: .70;
  --adv-87: .65;
  --adv-75: .60;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #151515;
    --raised: #1F1F1F;
    --sunken: #262626;
    --hover:  #262626;
    --press:  #2E2E2E;
    --ink-1:  #EDEDED;    /* 15.6:1 on ground */
    --ink-2:  #A3A3A3;    /* 7.2:1 on ground, 6.5:1 on raised */
    --ink-3:  #6E6E6E;
    --line:   #2B2B2B;
    --line-2: #3D3D3D;
    --primary: #EDEDED;
    --on-primary: #151515;
    --scrim: rgb(0 0 0 / .62);
    --shadow-pop: 0 1px 2px rgb(0 0 0 / .5), 0 18px 44px -14px rgb(0 0 0 / .8);
    --shadow-chip: 0 1px 3px rgb(0 0 0 / .5);
    --shadow-sheet: 0 -10px 40px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #151515;
  --raised: #1F1F1F;
  --sunken: #262626;
  --hover:  #262626;
  --press:  #2E2E2E;
  --ink-1:  #EDEDED;
  --ink-2:  #A3A3A3;
  --ink-3:  #6E6E6E;
  --line:   #2B2B2B;
  --line-2: #3D3D3D;
  --primary: #EDEDED;
  --on-primary: #151515;
  --scrim: rgb(0 0 0 / .62);
  --shadow-pop: 0 1px 2px rgb(0 0 0 / .5), 0 18px 44px -14px rgb(0 0 0 / .8);
  --shadow-chip: 0 1px 3px rgb(0 0 0 / .5);
  --shadow-sheet: 0 -10px 40px rgb(0 0 0 / .6);
  color-scheme: dark;
}