/* AMMO design system tokens for Wanda.
 *
 * Shared palette reference: https://styles.ammo.tools/tokens.json
 * Rules: https://styles.ammo.tools/AGENTS.md
 *
 * Dark is the default appearance; `html[data-theme="light"]` selects the
 * paired light set. Neutral roles match the published AMMO token set.
 * Synced from styles.ammo.tools on 2026-09-21; update both appearances together.
 *
 * Wanda's owner requested the fuller brand palette on 2026-09-20: purple
 * text on white with grey borders, blue navigation, green/yellow/red states.
 * These action and status roles are explicit Wanda exceptions to the shared
 * palette; they do not override its neutral roles. Never use pink or lavender.
 * Purple is saturated;
 * dark reading surfaces use neutral text rather than pastel purple.
 * Components consume these roles rather than copying colour values.
 */

:root {
    color-scheme: dark;

    /* ---- AMMO roles (dark, the default appearance) ---- */
    --canvas: #0b0e13;
    --surface: #172234;
    --ink: #f0f2f7;
    --muted: #a5b1c5;
    --line: #2b3444;
    --blue: #8dc7ff;
    --blue-hover: #b8ddff;
    --primary-fill: #3097ef;
    --primary-ink: #061c2e;
    --sidebar-bg: #192331;
    --sidebar-ink: #d5dce8;
    --sidebar-muted: #b5c0d1;
    --sidebar-hover: #263447;
    --sidebar-line: #303d50;
    --header-bg: #1a2332;
    --nav-active: #3097ef;
    --nav-active-ink: #061c2e;
    --code-bg: #151c28;
    --code-ink: #d5dff0;
    --hover: #162031;
    --control-bg: #131b27;
    --control-border: #526078;
    --focus: #82bfff;
    --selection: #284f73;
    --selection-ink: #f1f6ff;
    --success: #8cd6b0;
    --success-bg: #132d25;
    --danger: #ff6254;
    --danger-bg: #1b1b1b;
    --danger-border: #df4d43;
    --warning: #f0d057;
    --warning-bg: #302900;
    --warning-border: #887300;
    --info-bg: #1b2d48;
    --info-ink: #a8cdff;
    --scroll-thumb: #526078;

    /* ---- Brand signals ---- */
    --brand-blue: #3097ef;
    --brand-purple: #6434b9;
    --brand-red: #ef3340;

    /* ---- Purple on white, with a neutral grey edge in either theme ---- */
    --action: #ffffff;
    --action-hover: #f0f0f0;
    --on-action: var(--brand-purple);
    --action-border: #949494;
    --action-link: var(--blue);
    --purple-bg: #ffffff;
    --purple-wash: #ffffff;
    --purple-ink: var(--brand-purple);
    --purple-accent: #9b35ec;

    /* ---- User-selected note title colours, paired for readable text ---- */
    --note-blue: var(--blue);
    --note-purple: var(--purple-ink);
    --note-red: var(--danger);
    --note-none: var(--ink);

    /* ---- Derived roles AMMO does not name explicitly ---- */
    --danger-hover: #ff4936;
    --on-danger: var(--canvas);
    --scrim: #000000;
    /* Overlay washes: SVG-free translucent blacks derived from the scrim. */
    --scrim-soft: rgb(0 0 0 / 0.6);
    --scrim-strong: rgb(0 0 0 / 0.7);

    /* ---- Metrics (AMMO section 2) ---- */
    --button-radius: 12px;
    --control-radius: 8px;
    --compact-control-radius: 4px;
    --touch-target: 44px;
    --baseline-grid: 8px;
    --field-width: 360px;
    --control-height: 34px;
    --button-height: 32px;
    --sidebar-width: 242px;
    --sidebar-width-wide: 272px;
    --content-max: 1300px;

    /* ---- Type stacks (AMMO tokens.json `fonts`) ---- */
    --font-display: Rockwell, Arvo, Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

html[data-theme="light"] {
    color-scheme: light;

    /* ---- AMMO roles (light) ---- */
    --canvas: #ffffff;
    --surface: #f2f5fa;
    --ink: #202936;
    --muted: #596579;
    --line: #dce2eb;
    --blue: #146dc0;
    --blue-hover: #105ba2;
    --primary-fill: #2689df;
    --primary-ink: #071c2d;
    --sidebar-bg: #edf0f5;
    --sidebar-ink: #303c4f;
    --sidebar-muted: #5a687c;
    --sidebar-hover: #dce4ef;
    --sidebar-line: #d0d8e5;
    --header-bg: #f8f9fc;
    --nav-active: #3097ef;
    --nav-active-ink: #071c2d;
    --code-bg: #eef2f8;
    --code-ink: #34445f;
    --hover: #f2f6fc;
    --control-bg: #fff;
    --control-border: #bac6d7;
    --focus: #167bc9;
    --selection: #d7eafa;
    --selection-ink: #17344c;
    --success: #256c50;
    --success-bg: #e7f4ed;
    --danger: #b42318;
    --danger-bg: #ffffff;
    --danger-border: #a5382e;
    --warning: #685400;
    --warning-bg: #fff5bf;
    --warning-border: #b5a044;
    --info-bg: #e7f0ff;
    --info-ink: #235ba0;
    --scroll-thumb: #aab7c9;

    /* ---- Purple stays purple; no lavender washes ---- */
    --action: #ffffff;
    --action-hover: #f0f0f0;
    --on-action: var(--brand-purple);
    --action-border: #949494;
    --action-link: var(--blue);
    --purple-bg: #ffffff;
    --purple-wash: #ffffff;
    --purple-ink: var(--brand-purple);
    --purple-accent: var(--brand-purple);
    --danger-hover: #941b12;
}

/* ------------------------------------------------------------------
 * Wanda semantic aliases.
 *
 * Existing templates and stylesheets address roles by these names. Each
 * maps onto an AMMO role so the whole application inherits the palette
 * from the token set above, including Wanda's purple family.
 * ------------------------------------------------------------------ */
:root {
    /* Wanda's `ground` scale describes raised surfaces, not the page. The page
       uses --canvas directly (html/body), so `ground` maps to the AMMO raised
       surface and its two lower steps to a recessed fill and a hover state. */
    --ground: var(--surface);
    --ground-200: var(--control-bg);
    --ground-300: var(--hover);

    --ink-700: var(--ink);
    --ink-600: var(--muted);
    --ink-500: var(--muted);
    --ink-400: var(--muted);

    --rule: var(--line);
    --rule-strong: var(--control-border);

    --accent: var(--focus);
    --link: var(--action-link);
    --selected: var(--selection);
    --on-selected: var(--selection-ink);
    --toolbar: var(--header-bg);

    --sidebar: var(--sidebar-bg);
    --on-brand-blue: var(--nav-active-ink);

    /* Status ramps collapse onto the AMMO semantic roles. */
    --mint-50: var(--success-bg);
    --mint-100: var(--success-bg);
    --mint-200: var(--success-bg);
    --mint-300: var(--success);
    --mint-400: var(--success);
    --mint-500: var(--success);
    --mint-600: var(--success);
    --mint-700: var(--success);
    --mint-800: var(--success);
    --mint-900: var(--success);

    --amber-50: var(--warning-bg);
    --amber-100: var(--warning-bg);
    --amber-200: var(--warning-bg);
    --amber-300: var(--warning);
    --amber-400: var(--warning);
    --amber-500: var(--warning);
    --amber-600: var(--warning);
    --amber-700: var(--warning);
    --amber-800: var(--warning);
    --amber-900: var(--warning);

    --red-50: var(--danger-bg);
    --red-100: var(--danger-bg);
    --red-200: var(--danger-bg);
    --red-300: var(--danger);
    --red-400: var(--danger);
    --red-500: var(--danger);
    --red-600: var(--danger);
    --red-700: var(--danger);
    --red-800: var(--danger);
    --red-900: var(--danger);

    --coral-50: var(--danger-bg);
    --coral-100: var(--danger-bg);
    --coral-200: var(--danger-bg);
    --coral-300: var(--danger);
    --coral-400: var(--danger);
    --coral-500: var(--danger);
    --coral-600: var(--danger);
    --coral-700: var(--danger);
    --coral-800: var(--danger);
    --coral-900: var(--danger);

    /* Sky is the accent/info family. */
    --sky-50: var(--info-bg);
    --sky-100: var(--info-bg);
    --sky-200: var(--info-bg);
    --sky-300: var(--primary-fill);
    --sky-400: var(--primary-fill);
    --sky-500: var(--primary-fill);
    --sky-600: var(--primary-fill);
    --sky-700: var(--info-ink);
    --sky-800: var(--info-ink);
    --sky-900: var(--info-ink);

    /* Violet retains its own hue for Notes and manually entered hours. */
    --violet-50: var(--purple-bg);
    --violet-100: var(--purple-wash);
    --violet-200: var(--purple-wash);
    --violet-300: var(--purple-accent);
    --violet-400: var(--purple-accent);
    --violet-500: var(--purple-accent);
    --violet-600: var(--purple-accent);
    --violet-700: var(--purple-ink);
    --violet-800: var(--purple-ink);
    --violet-900: var(--purple-ink);
}

/* ------------------------------------------------------------------
 * AMMO base primitives.
 * ------------------------------------------------------------------ */
::selection {
    background: var(--selection);
    color: var(--selection-ink);
}

input,
textarea,
select {
    caret-color: var(--link);
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Keep native select behaviour; replace only the browser-painted arrow.
   An SVG data URI cannot reference a custom property, so the chevron is the
   one place a literal colour is unavoidable. It is defined here, at the token
   layer, once per appearance, using the --muted value so it tracks the theme. */
:root {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b4' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}
html[data-theme="light"] {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
    padding-inline-end: 2.25rem;
}

select:not([multiple]):dir(rtl) {
    background-position: left 0.75rem center;
}

@media (forced-colors: active) {
    select:not([multiple]):not([size]),
    select:not([multiple])[size="0"],
    select:not([multiple])[size="1"] {
        -webkit-appearance: auto;
        appearance: auto;
        background-image: none;
    }
}

/* The 3px tri-colour rule from AGENTS.md section 3: blue, purple, red,
   left to right in equal thirds. */
.brand-colours {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    display: flex;
    pointer-events: none;
}
.brand-colours > span {
    flex: 1;
}
.brand-colours > span:nth-child(1) {
    background: var(--brand-blue);
}
.brand-colours > span:nth-child(2) {
    background: var(--brand-purple);
}
.brand-colours > span:nth-child(3) {
    background: var(--brand-red);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
html::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
}

/* ------------------------------------------------------------------
 * AMMO control metrics.
 *
 * Pointer controls run at 32-34px; coarse pointers get a 44px target.
 * ------------------------------------------------------------------ */
/* Author styles must never reveal controls hidden by their behaviour. */
[hidden] { display: none !important; }

/* One action-control contract for new components and existing page families.
   Navigation tabs, formatting commands and the companion eye are separate controls. */
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--button-height);
    padding: 6px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--button-radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button):hover {
    background: var(--hover);
    color: var(--ink);
    text-decoration: none;
}
html :is(.ammo-button--primary, .task-primary, .notes-primary,
    .bookmark-primary, .hours-apply, .toast-action, :is(a, button, input).bg-action) {
    background: var(--action);
    color: var(--on-action);
    border-color: var(--action-border);
}
html :is(.ammo-button--primary, .task-primary, .notes-primary,
    .bookmark-primary, .hours-apply, .toast-action, :is(a, button, input).bg-action):hover {
    background: var(--action-hover);
    color: var(--on-action);
}
html :is(.ammo-button--danger, .task-danger, .notes-danger,
    .bookmark-danger, :is(a, button, input).bg-danger) {
    background: var(--danger);
    color: var(--on-danger);
    border-color: var(--danger);
}
html :is(.ammo-button--danger, .task-danger, .notes-danger,
    .bookmark-danger, :is(a, button, input).bg-danger):hover {
    background: var(--danger-hover);
    color: var(--on-danger);
    border-color: var(--danger-hover);
}
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button).danger-action,
html .bookmark-delete {
    color: var(--danger);
}
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button).danger-action:hover,
html .bookmark-delete:hover {
    background: var(--danger-bg);
}
html body :is(.ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button) {
    width: var(--button-height);
    height: var(--button-height);
    min-width: var(--button-height);
    padding: 0;
    flex-shrink: 0;
}
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button) > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button):disabled,
html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button)[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}
html :is(.notes-icon-button, .notes-small-button).is-active {
    background: var(--selected);
    color: var(--on-selected);
    border-color: var(--control-border);
}
@media (pointer: coarse) {
    html :is(.ammo-button, .task-button, .notes-button, .notes-small-button,
    .notes-source-toggle, .bookmark-button, .wanda-button, .hours-apply,
    .hours-export, .toast-action, :is(a, button, input).bg-action,
    :is(a, button, input).bg-danger, :is(a, button).rounded-block, .ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button) { min-height: var(--touch-target); }
    html body :is(.ammo-button--icon, .task-icon, .notes-icon-button,
    .bookmark-icon, .icon-button, .wanda-icon-button) {
        width: var(--touch-target);
        height: var(--touch-target);
        min-width: var(--touch-target);
    }
}

.ammo-field {
    width: 100%;
    max-width: var(--field-width);
    min-height: var(--control-height);
    padding: 6px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--control-bg);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.4;
}
.ammo-field::placeholder {
    color: var(--muted);
}

/* Shared indeterminate progress indicator; pair it with an action/status label. */
.ammo-spinner {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    animation: ammo-spin .8s linear infinite;
}
.ammo-spinner[hidden] { display: none; }
.ammo-spinner > svg { width: 16px; height: 16px; }
@keyframes ammo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ammo-spinner { animation: none; }
}

/* Form fields also retain a full touch target. */
@media (pointer: coarse) {
    .ammo-field {
        min-height: var(--touch-target);
    }
}

/* A softer warning wash where a full warning background would read as a
   status rather than a row highlight. */
.bg-warning-soft {
    background: color-mix(in srgb, var(--warning-bg) 60%, transparent);
}

html :is(.bg-violet-100, .task-tag) {
    border: 1px solid var(--action-border);
}