/* Signal 2.0 — color themes (light + dark) · AI Protection
 * Source of truth: Wilfred's dark-mode handoff (2026-10-01) + light token inventory.
 *
 * Every page links this file first (see src/theme/themeHead.cjs), before any page CSS,
 * so pages and packs that still declare their own light :root tokens keep working.
 * Dark values live under :root[data-theme="dark"] — higher specificity than a plain
 * :root block — so a page's inline light tokens can never override the dark theme.
 *
 * data-theme on <html> is always the RESOLVED theme ("light" | "dark"); the stored
 * preference ("light" | "dark" | "system") is mirrored on data-theme-preference.
 * Components consume semantic tokens only; never add per-page dark HEX.
 */

:root{
  color-scheme:light;

  /* — primitives (light, locked — never change these HEX) — */
  --color-paper:#f0f1f3;
  --color-paper-2:#ffffff;
  --color-ink:#0e1116;
  --color-ink-2:#49505f;
  --color-cobalt:#3664ef;
  --color-cobalt-ink:#1f53e6;
  --color-cobalt-electric:#3d5afe;
  --color-cobalt-soft:#e8effe;
  --color-hair:#d3d8e2;
  --color-signal:#e23b3b;
  --color-signal-soft:#fdecec;
  --color-success:#0f7d4e;

  /* — surfaces — */
  --color-surface-page:var(--color-paper);
  --color-surface-alt:var(--color-paper-2);
  --color-surface-elevated:var(--color-paper-2);   /* megamenu, modals, popovers, drawers */
  --color-surface-inverse:var(--color-ink);
  --color-surface-footer:var(--color-ink);         /* site footer band (ink in light, one step off page in dark) */
  --color-surface-tint:var(--color-cobalt-soft);
  --color-surface-alert:var(--color-signal-soft);
  --color-surface-success:#e9f5ef;                 /* was hardcoded in .callout--success */
  --color-surface-caution:#fdf2de;                 /* member dashboard only (provisional) */

  /* — text — */
  --color-text-primary:var(--color-ink);
  --color-text-muted:var(--color-ink-2);
  --color-text-subtle:#8a91a0;                     /* placeholders, tertiary legal */
  --color-text-on-inverse:var(--color-paper-2);
  --color-text-on-action:var(--color-paper-2);
  --color-text-brand:var(--color-cobalt);          /* cobalt type: kickers, icons, sup marks */
  --color-text-caution:#875400;                    /* member dashboard only (provisional) */

  /* — actions + links — */
  --color-action-primary:var(--color-cobalt);
  --color-action-hover:var(--color-cobalt-ink);
  --color-action-focus:var(--color-cobalt-electric);
  --color-link:var(--color-cobalt-ink);
  --color-link-hover:var(--color-ink);
  --color-selected-fill:var(--color-ink);          /* selected tab / segment / step (ink in light → cobalt in dark) */
  --color-selected-text:var(--color-paper-2);

  /* — borders — */
  --color-border-structural:var(--color-ink);
  --color-border-control:var(--color-ink);         /* input / checkbox outlines at rest */
  --color-border-hair:var(--color-hair);

  /* — feedback — */
  --color-feedback-success:var(--color-success);
  --color-feedback-warning:var(--color-signal);
  --color-feedback-danger:var(--color-signal);
  --color-feedback-info:var(--color-cobalt-ink);
  --color-caution:#e9a21f;                         /* member dashboard only (provisional) */

  /* — hard offset shadows (no blur, ever) — */
  --color-shadow-ink:var(--color-ink);
  --color-shadow-paper:var(--color-paper-2);
  --shadow-offset-ink:5px 5px 0 var(--color-shadow-ink);
  --shadow-offset-cobalt:5px 5px 0 var(--color-cobalt);
  --shadow-offset-signal:5px 5px 0 var(--color-signal);
  --shadow-offset-paper:5px 5px 0 var(--color-shadow-paper);

  /* — overlays — */
  --color-scrim:rgba(14,17,22,.7);
  --color-scrim-soft:rgba(14,17,22,.45);

  /* — logos (outlined canonical nav lockups) — */
  --logo-nav:url("/assets/logos/canonical/lockup-cobalt-nav.svg");
}

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

  --color-surface-page:#0e1116;
  --color-surface-alt:#171a21;
  --color-surface-elevated:#1f2430;
  --color-surface-inverse:#0a0c10;
  --color-surface-footer:#171a21;
  --color-surface-tint:#15233f;
  --color-surface-alert:#2a1416;
  --color-surface-success:#0f2319;
  --color-surface-caution:#2a210f;

  --color-text-primary:#f0f1f3;
  --color-text-muted:#aab1bf;
  --color-text-subtle:#8a91a0;
  --color-text-on-inverse:#f0f1f3;
  --color-text-on-action:#ffffff;
  --color-text-brand:#7b93ff;
  --color-text-caution:#f0c14d;

  --color-action-primary:#3664ef;
  --color-action-hover:#1f53e6;
  --color-action-focus:#3d5afe;
  --color-link:#7b93ff;
  --color-link-hover:#f0f1f3;
  --color-selected-fill:#3664ef;
  --color-selected-text:#ffffff;

  --color-border-structural:#3a4150;
  --color-border-control:#6b7385;
  --color-border-hair:#2a2f38;

  --color-feedback-success:#3dba7c;
  --color-feedback-warning:#f07171;
  --color-feedback-danger:#f07171;
  --color-feedback-info:#7b93ff;
  --color-caution:#e9a21f;

  --color-shadow-ink:#000000;
  --color-shadow-paper:#f0f1f3;
  --shadow-offset-ink:5px 5px 0 #000000;
  --shadow-offset-cobalt:5px 5px 0 #3664ef;
  --shadow-offset-signal:5px 5px 0 #e23b3b;
  --shadow-offset-paper:5px 5px 0 #f0f1f3;

  --color-scrim:rgba(0,0,0,.72);
  --color-scrim-soft:rgba(0,0,0,.55);

  --logo-nav:url("/assets/logos/canonical/lockup-white-nav.svg");
}

/* Printing from dark mode: paper is white, so print with the light token values. */
@media print{
  :root[data-theme="dark"]{
    color-scheme:light;
    --color-surface-page:var(--color-paper);
    --color-surface-alt:var(--color-paper-2);
    --color-surface-elevated:var(--color-paper-2);
    --color-surface-inverse:var(--color-ink);
    --color-surface-footer:var(--color-ink);
    --color-surface-tint:var(--color-cobalt-soft);
    --color-surface-alert:var(--color-signal-soft);
    --color-surface-success:#e9f5ef;
    --color-surface-caution:#fdf2de;
    --color-text-primary:var(--color-ink);
    --color-text-muted:var(--color-ink-2);
    --color-text-subtle:#8a91a0;
    --color-text-on-inverse:var(--color-paper-2);
    --color-text-on-action:var(--color-paper-2);
    --color-text-brand:var(--color-cobalt);
    --color-text-caution:#875400;
    --color-action-primary:var(--color-cobalt);
    --color-action-hover:var(--color-cobalt-ink);
    --color-action-focus:var(--color-cobalt-electric);
    --color-link:var(--color-cobalt-ink);
    --color-link-hover:var(--color-ink);
    --color-selected-fill:var(--color-ink);
    --color-selected-text:var(--color-paper-2);
    --color-border-structural:var(--color-ink);
    --color-border-control:var(--color-ink);
    --color-border-hair:var(--color-hair);
    --color-feedback-success:var(--color-success);
    --color-feedback-warning:var(--color-signal);
    --color-feedback-danger:var(--color-signal);
    --color-feedback-info:var(--color-cobalt-ink);
    --color-caution:#e9a21f;
    --color-shadow-ink:var(--color-ink);
    --color-shadow-paper:var(--color-paper-2);
    --shadow-offset-ink:5px 5px 0 var(--color-shadow-ink);
    --shadow-offset-cobalt:5px 5px 0 var(--color-cobalt);
    --shadow-offset-signal:5px 5px 0 var(--color-signal);
    --shadow-offset-paper:5px 5px 0 var(--color-shadow-paper);
    --color-scrim:rgba(14,17,22,.7);
    --color-scrim-soft:rgba(14,17,22,.45);
    --logo-nav:url("/assets/logos/canonical/lockup-cobalt-nav.svg");
  }
}

/* Autofill: no white flash on dark inputs. */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus,
:root[data-theme="dark"] select:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--color-surface-alt) inset;
  -webkit-text-fill-color:var(--color-text-primary);
  caret-color:var(--color-text-primary);
}

/* Theme-aware nav lockup. theme.js also swaps src for browsers that ignore content:url(). */
:root[data-theme="dark"] img[data-theme-logo]:not([data-theme-logo="fixed"]){content:var(--logo-nav)}

/* ---------------------------------------------------------------------------
 * Theme control (header icon menu, drawer/footer/account radio group)
 * Signal language: radius 0, 2px rules, hard offsets, mono labels.
 * ------------------------------------------------------------------------- */
.aip-theme-menu{position:relative;display:inline-flex;flex:none}
.aip-theme-menu__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  background:transparent;color:inherit;cursor:pointer;
  border:0;border-bottom:2px solid transparent;border-radius:0;
}
.aip-theme-menu__btn:hover,
.aip-theme-menu__btn[aria-expanded="true"]{color:var(--color-link);border-bottom-color:var(--color-cobalt)}
.aip-theme-menu__btn:focus-visible{outline:3px solid var(--color-action-focus);outline-offset:2px}
.aip-theme-menu__btn svg{width:20px;height:20px;display:block}
.aip-theme-menu__list{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:168px;
  margin:0;padding:6px 0;list-style:none;
  background:var(--color-surface-elevated);color:var(--color-text-primary);
  border:2px solid var(--color-border-structural);box-shadow:var(--shadow-offset-ink);
}
.aip-theme-menu__list[hidden]{display:none}
.aip-theme-menu__item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 16px;
  background:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;text-align:left;
  font:500 .9rem/1.2 var(--font-display,'Space Grotesk',system-ui,sans-serif);
}
.aip-theme-menu__item svg{width:18px;height:18px;flex:none}
.aip-theme-menu__item:hover,.aip-theme-menu__item:focus-visible{background:var(--color-surface-tint);outline:none}
.aip-theme-menu__item[aria-checked="true"]{box-shadow:inset 4px 0 0 var(--color-cobalt)}
.aip-theme-menu__item[aria-checked="true"]::after{
  content:"";margin-left:auto;width:8px;height:8px;background:var(--color-cobalt);flex:none;
}

.aip-theme-switch{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:0;border:0;min-width:0;
}
.aip-theme-switch__label{
  font:500 .75rem/1.2 var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  letter-spacing:.12em;text-transform:uppercase;color:inherit;padding:0;float:none;
}
.aip-theme-switch__opts{display:inline-flex;border:2px solid currentColor}
.aip-theme-switch__opt{position:relative;display:inline-flex}
.aip-theme-switch__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.aip-theme-switch__opt span{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;cursor:pointer;
  font:500 .8rem/1 var(--font-display,'Space Grotesk',system-ui,sans-serif);
}
.aip-theme-switch__opt + .aip-theme-switch__opt span{border-left:2px solid currentColor}
.aip-theme-switch__opt input:checked + span{background:var(--color-cobalt);color:#ffffff}
.aip-theme-switch__opt input:focus-visible + span{outline:3px solid var(--color-action-focus);outline-offset:2px;position:relative;z-index:1}
.aip-theme-switch__opt span:hover{text-decoration:underline;text-underline-offset:3px}

/* Placement helpers for auto-mounted controls */
.aip-theme-slot--footer{margin-top:var(--space-6,24px)}
.aip-theme-slot--drawer{padding:16px 0 4px}