/*
 * admin/ui-tokens.css — the CMS's own colour tokens, in both schemes.
 *
 * Imported by BOTH stylesheets: cms.css (the form document) and preview.css
 * (Decap renders the preview in its own iframe, so it needs its own copy of
 * the tokens). Nothing here reaches the wedding site — that lives in a second,
 * nested iframe with the couple's palette, and its light/dark toggle is a
 * separate thing from the one that switches this chrome.
 *
 * Light lives on :root, dark on [data-ww-scheme="dark"]. "Auto" is resolved
 * to one of those two by the inline script in admin/index.html (the same trick
 * the wedding site uses for its own theme), so the dark values are written
 * once instead of twice — a media query would need a second copy for the
 * toggle to win. ops/test-rules.mjs asserts the pairs below clear WCAG AA in
 * both schemes.
 */

:root {
  color-scheme: light;

  --ui-bg: #eef0f4;            /* page behind the cards */
  --ui-surface: #fff;          /* card, input, popover */
  --ui-surface-2: #fbfcfd;     /* nested fill */
  --ui-surface-3: #f5f7fa;     /* list-row header, hover fill */
  --ui-surface-4: #f7f8fa;     /* parked / switched-off card */
  --ui-btn-primary-bg: #f2f5fa;

  --ui-line: #dfe3ea;
  --ui-line-2: #e7eaf0;        /* quieter */
  --ui-line-3: #d7dce5;        /* input border */
  --ui-line-dash: #cfd5df;
  --ui-line-strong: #a7b0c0;   /* hover */
  --ui-line-strong-2: #b9c2d2;
  --ui-line-i: #c3cad6;        /* the (i) button */
  --ui-line-i-hover: #8a94a6;
  --ui-chip-line: rgba(20, 26, 40, .16);

  --ui-text: #171c26;
  --ui-text-1: #2b3242;
  --ui-text-2: #3c4455;
  --ui-text-3: #4a5468;
  --ui-muted: #666d7c;
  --ui-muted-2: #7b8496;
  --ui-muted-3: #8a92a3;
  --ui-faint: #98a0b0;
  --ui-tab-text: #5b6474;

  --ui-ok: #3f8f5f;
  --ui-ok-text: #1f6b3d;
  --ui-ok-soft: #4a7a58;
  --ui-ok-ring: rgba(63, 143, 95, .18);
  --ui-ok-bg: #eefaf1;
  --ui-ok-line: #cfead9;

  --ui-warn-text: #7a4b00;
  --ui-warn-bg: #fff6e5;
  --ui-warn-bg-2: #fdefd6;
  --ui-warn-bg-3: #fffaf0;
  --ui-warn-line: #f0dcb4;

  --ui-danger: #a33;
  --ui-danger-strong: #8a2020;
  --ui-danger-line: #d99;
  --ui-danger-line-2: #f2cccc;
  --ui-danger-bg: #fff7f7;
  --ui-danger-bg-2: #fdecec;

  --ui-focus: #3c78d8;
  --ui-switch-off: #cfd5df;
  --ui-knob: #fff;

  --ui-jump-bg: rgba(238, 240, 244, .96);
  --ui-shadow-card: 0 1px 2px rgba(20, 26, 40, .05);
  --ui-shadow-tab: 0 1px 2px rgba(20, 26, 40, .14);
  --ui-shadow-pop: 0 10px 32px rgba(20, 26, 40, .18);
  --ui-shadow-knob: 0 1px 2px rgba(20, 26, 40, .3);
}

/* Dark. Surfaces step up as they come forward (bg -> card -> nested), which is
 * the opposite of light mode, where they step down. */
:root[data-ww-scheme="dark"] {
  color-scheme: dark;

  --ui-bg: #14161b;
  --ui-surface: #1c1f26;
  --ui-surface-2: #22262e;
  --ui-surface-3: #262b34;
  --ui-surface-4: #191c22;
  --ui-btn-primary-bg: #2a3140;

  --ui-line: #2e343f;
  --ui-line-2: #272c35;
  --ui-line-3: #343b47;
  --ui-line-dash: #39404c;
  --ui-line-strong: #58616f;
  --ui-line-strong-2: #454e5c;
  --ui-line-i: #454d5a;
  --ui-line-i-hover: #79828f;
  --ui-chip-line: rgba(255, 255, 255, .18);

  --ui-text: #f2f4f8;
  --ui-text-1: #e4e8ef;
  --ui-text-2: #d2d8e2;
  --ui-text-3: #c2c9d5;
  --ui-muted: #a3abb9;
  --ui-muted-2: #99a1af;
  --ui-muted-3: #939ba9;
  --ui-faint: #7d8492;
  --ui-tab-text: #aab2be;

  --ui-ok: #55b07c;
  --ui-ok-text: #8ad9ac;
  --ui-ok-soft: #8cc9a3;
  --ui-ok-ring: rgba(85, 176, 124, .28);
  --ui-ok-bg: #16281d;
  --ui-ok-line: #2c4a37;

  --ui-warn-text: #f3c88f;
  --ui-warn-bg: #2b2313;
  --ui-warn-bg-2: #3a2f18;
  --ui-warn-bg-3: #251f11;
  --ui-warn-line: #57461f;

  --ui-danger: #f09595;
  --ui-danger-strong: #f4a9a9;
  --ui-danger-line: #7d4040;
  --ui-danger-line-2: #5e3030;
  --ui-danger-bg: #2b1a1a;
  --ui-danger-bg-2: #331d1d;

  --ui-focus: #78adff;
  --ui-switch-off: #444c5a;
  --ui-knob: #e8ebf1;

  --ui-jump-bg: rgba(20, 22, 27, .94);
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
  --ui-shadow-tab: 0 1px 2px rgba(0, 0, 0, .55);
  --ui-shadow-pop: 0 12px 34px rgba(0, 0, 0, .6);
  --ui-shadow-knob: 0 1px 2px rgba(0, 0, 0, .55);
}