/* TCC Theme tokens v1  -  TCC-THEME-001.
 *
 * Reusable design tokens for Dark and Light, plus the two small components introduced in Wave 1 (the theme choice control
 * and the modal used by the preferred-name completion prompt).
 *
 *  - The DARK values below are the RC.2 palette, recorded as tokens. Nothing in RC.2 reads them, so this file changes no
 *    existing dark rendering.
 *  - The LIGHT theme is a designed palette (cool paper background, white surfaces, deep ink text, darkened semantic hues
 *    that keep >= 4.5:1 contrast) - not an inversion of the dark one.
 *  - Semantic meaning is identical in both themes:  success = discipline (green)  |  plan = simulation / planning / action
 *    (turquoise)  |  danger = loss (red)  |  caution = reset (orange).
 *  - In light mode the legacy RC.2 custom properties (--bg, --panel, --text ...) are re-pointed at these tokens, and
 *    tcc_theme_light_compat_v1.css (generated, see tools/gen_theme_light_compat.py) carries the light equivalents of the
 *    hard-coded dark colours in the existing screens. Later waves migrate components to the tokens directly.
 */
:root {
  --tcc-bg: #061019;
  --tcc-bg-2: #08131d;
  --tcc-surface: #0d1822;
  --tcc-surface-2: #111f2b;
  --tcc-surface-3: #162633;
  --tcc-border: #243744;
  --tcc-border-strong: #304654;
  --tcc-text: #eef4f7;
  --tcc-text-muted: #98a9b4;

  --tcc-success: #31d46a;   /* green: discipline / success */
  --tcc-plan: #8ff0d0;      /* turquoise: simulation / planning / action */
  --tcc-danger: #ff5f69;    /* red: loss / danger */
  --tcc-caution: #ffb21e;   /* orange: caution / reset */
  --tcc-info: #2fa8ff;
  --tcc-success-bg: rgba(49, 212, 106, .12);
  --tcc-plan-bg: rgba(143, 240, 208, .10);
  --tcc-danger-bg: rgba(255, 95, 105, .12);
  --tcc-caution-bg: rgba(255, 178, 30, .12);

  --tcc-accent-bg: #8ff0d0;
  --tcc-accent-fg: #04140f;
  --tcc-focus-ring: #8ff0d0;
  --tcc-scrim: rgba(2, 8, 12, .72);
  --tcc-shadow: 0 10px 35px rgba(0, 0, 0, .35);
}

html[data-tcc-theme-resolved="light"] {
  --tcc-bg: #f3f6f8;
  --tcc-bg-2: #eaf0f4;
  --tcc-surface: #ffffff;
  --tcc-surface-2: #eef3f6;
  --tcc-surface-3: #e4ebf0;
  --tcc-border: #d3dce3;
  --tcc-border-strong: #b7c5cf;
  --tcc-text: #0f1c26;
  --tcc-text-muted: #465b69;

  --tcc-success: #0d7a37;
  --tcc-plan: #0a7580;
  --tcc-danger: #b91c28;
  --tcc-caution: #a34a00;
  --tcc-info: #0b6fbf;
  --tcc-success-bg: rgba(13, 122, 55, .10);
  --tcc-plan-bg: rgba(10, 117, 128, .10);
  --tcc-danger-bg: rgba(185, 28, 40, .09);
  --tcc-caution-bg: rgba(163, 74, 0, .10);

  --tcc-accent-bg: #0a7580;
  --tcc-accent-fg: #ffffff;
  --tcc-focus-ring: #0a7580;
  --tcc-scrim: rgba(15, 28, 38, .45);
  --tcc-shadow: 0 10px 30px rgba(15, 28, 38, .14);

  /* RC.2 legacy custom properties, re-pointed at the light tokens */
  --bg: var(--tcc-bg);
  --bg2: var(--tcc-bg-2);
  --panel: var(--tcc-surface);
  --panel2: var(--tcc-surface-2);
  --panel3: var(--tcc-surface-3);
  --line: var(--tcc-border);
  --line2: var(--tcc-border-strong);
  --text: var(--tcc-text);
  --muted: var(--tcc-text-muted);
  --green: var(--tcc-success);
  --green2: #0b6a2f;
  --blue: var(--tcc-info);
  --purple: #6b3fd0;
  --orange: var(--tcc-caution);
  --red: var(--tcc-danger);
  --yellow: #8a5a00;
}

/* ---------------------------------------------------------------- theme choice control (Account -> Appearance) */
.tcc-theme-choice { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--tcc-border-strong); border-radius: 10px; overflow: hidden; }
.tcc-theme-choice button { background: var(--tcc-surface-2); color: var(--tcc-text); border: 0; padding: 10px 18px; font-weight: 800; letter-spacing: .06em; font-size: 12px; cursor: pointer; }
.tcc-theme-choice button + button { border-left: 1px solid var(--tcc-border-strong); }
.tcc-theme-choice button:hover { background: var(--tcc-surface-3); }
.tcc-theme-choice button[aria-pressed="true"] { background: var(--tcc-accent-bg); color: var(--tcc-accent-fg); }
.tcc-theme-choice button:focus-visible { outline: 2px solid var(--tcc-focus-ring); outline-offset: -2px; }
.tcc-appearance { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--tcc-border); border-radius: 12px; background: var(--tcc-surface); color: var(--tcc-text); }
.tcc-appearance h3 { margin: 0 0 6px; }
.tcc-appearance p { margin: 6px 0 10px; color: var(--tcc-text-muted); font-size: 12px; line-height: 1.45; }

/* ---------------------------------------------------------------- modal (preferred-name completion) */
.tcc-modal-backdrop { position: fixed; inset: 0; background: var(--tcc-scrim); display: flex; align-items: center; justify-content: center; z-index: 2147483000; padding: 16px; }
.tcc-modal { background: var(--tcc-surface); color: var(--tcc-text); border: 1px solid var(--tcc-border-strong); border-radius: 14px; padding: 22px; width: min(440px, 100%); box-shadow: var(--tcc-shadow); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.tcc-modal h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: .04em; }
.tcc-modal p { margin: 0 0 12px; color: var(--tcc-text-muted); font-size: 13px; line-height: 1.5; }
.tcc-modal label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; margin: 10px 0 6px; }
.tcc-modal input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--tcc-border-strong); background: var(--tcc-surface-2); color: var(--tcc-text); font-size: 15px; }
.tcc-modal input[type="text"]:focus-visible { outline: 2px solid var(--tcc-focus-ring); outline-offset: 1px; }
.tcc-modal .tcc-modal-error { min-height: 18px; margin: 6px 0 0; color: var(--tcc-danger); font-size: 12px; font-weight: 700; }
.tcc-modal .tcc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tcc-modal button { border-radius: 8px; padding: 10px 16px; font-weight: 800; font-size: 12px; letter-spacing: .06em; cursor: pointer; border: 1px solid var(--tcc-border-strong); background: var(--tcc-surface-2); color: var(--tcc-text); }
.tcc-modal button.primary { background: var(--tcc-accent-bg); color: var(--tcc-accent-fg); border-color: transparent; }
.tcc-modal button:focus-visible { outline: 2px solid var(--tcc-focus-ring); outline-offset: 2px; }
.tcc-modal button:disabled { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- non-blocking preferred-name notice (existing accounts) */
.tcc-nudge { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2147482000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--tcc-border-strong); background: var(--tcc-surface); color: var(--tcc-text); box-shadow: var(--tcc-shadow); font-size: 12px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.tcc-nudge button { border-radius: 8px; padding: 6px 12px; font-weight: 800; font-size: 11px; letter-spacing: .06em; cursor: pointer; border: 1px solid var(--tcc-border-strong); background: var(--tcc-accent-bg); color: var(--tcc-accent-fg); }
.tcc-nudge button#tccPnNudgeDismiss { background: transparent; color: var(--tcc-text-muted); padding: 4px 8px; font-size: 16px; line-height: 1; }
.tcc-nudge button:focus-visible { outline: 2px solid var(--tcc-focus-ring); outline-offset: 2px; }