/* AnyTalk identity v2 — design tokens.
   Source: AnyTalk_Rebrand_Kit_v2/tokens/anytalk-v2.css

   Deliberately scoped to .at-v2 rather than :root. The rebrand is being rolled out one
   surface at a time, and the rest of the application still runs on the legacy teal chrome;
   tokens on :root would repaint all of it at once. A surface opts in by carrying .at-v2 on
   its outermost element, and everything below it — including component-scoped stylesheets,
   which resolve custom properties through the DOM rather than through their own scope —
   can then use var(--at-*).

   Colour budget from the brand spec: ~80% near-black and dark surfaces, ~15% raised slate,
   ~4% mint, ~1% electric blue. Mint is an accent; it is never a full-width background. */

.at-v2 {
    color-scheme: dark;

    --at-midnight: #02080C;
    --at-chrome: #071117;
    --at-surface: #0D1820;
    --at-surface-raised: #15232D;
    --at-surface-active: #1D2E39;
    --at-border: #263943;

    --at-brand-mint: #31E1D0;
    --at-brand-bright: #75FFF1;
    --at-brand-blue: #31A8FF;
    --at-text-primary: #F7FAFC;
    --at-text-secondary: #9AA8B2;
    --at-text-subtle: #6E7D87;
    --at-listening: #42DF91;
    --at-danger: #FF6B7E;

    --at-brand-gradient: linear-gradient(135deg, var(--at-brand-bright) 0%, var(--at-brand-mint) 48%, var(--at-brand-blue) 100%);
    --at-chrome-gradient: linear-gradient(180deg, rgba(9, 21, 27, 0.96), rgba(4, 11, 15, 0.94));
    --at-panel-gradient: linear-gradient(145deg, rgba(23, 39, 49, 0.93), rgba(7, 15, 21, 0.98));
    --at-active-gradient: linear-gradient(90deg, rgba(32, 50, 61, 0.98), rgba(23, 37, 47, 0.88));

    /* Inter is not self-hosted by this project, so this resolves to Segoe UI on Windows and
       to Noto Sans JP for Japanese glyphs. Adding the Inter webfont is a separate change —
       the stack is already correct for it. */
    --at-font-ui: Inter, "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
    --at-radius-sm: 12px;
    --at-radius-md: 16px;
    --at-radius-lg: 22px;
    --at-radius-xl: 28px;
    --at-radius-pill: 999px;

    --at-shadow-chrome: 0 14px 44px rgba(0, 0, 0, 0.38);
    --at-shadow-drawer: 0 28px 90px rgba(0, 0, 0, 0.62);
    --at-shadow-brand: 0 0 28px rgba(49, 225, 208, 0.18);
    --at-focus-ring: 0 0 0 3px rgba(49, 225, 208, 0.30);

    color: var(--at-text-primary);
    font-family: var(--at-font-ui);
}

    .at-v2 *,
    .at-v2 *::before,
    .at-v2 *::after {
        box-sizing: border-box;
    }

    .at-v2 button,
    .at-v2 input,
    .at-v2 select,
    .at-v2 textarea {
        font: inherit;
    }

    /* One visible focus treatment for every control on a rebranded surface. Bootstrap's
       default ring is a blue glow that does not belong to this palette. */
    .at-v2 :focus-visible {
        outline: none;
        box-shadow: var(--at-focus-ring);
    }

/* Brand lockup: the premium mark beside the wordmark. Wordmark is 500 weight with tight
   negative tracking — per the spec it is never set in bold. */
.at-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    user-select: none;
}

    .at-brand-lockup img {
        flex: 0 0 auto;
        filter: drop-shadow(0 0 10px rgba(49, 225, 208, 0.18));
    }

    .at-brand-lockup .at-wordmark {
        color: var(--at-text-primary);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.045em;
    }