/*
 * TITAN — Phase 0a Theme Variables (v6.1.0-beta.3)
 *
 * Three CSS-variable palettes scoped to `:root[data-theme=…]`. Set the
 * attribute via `useThemeVariables()` (see ../hooks/useThemeVariables.ts)
 * and any descendant that reads `var(--theme-...)` re-skins automatically.
 *
 * Phase 0a is plumbing only — no inline-style migration yet. Phase 0d
 * does the page-by-page replacement work.
 *
 * Three themes per the mission canvas polish plan
 * (~/Desktop/titan-mission-canvas-plan.md):
 *
 *   • office       — warm wood desk, brass, paper (current DeskSurface vibe)
 *   • workshop     — brushed steel, blueprint grid, terminal green accent
 *   • observatory  — deep indigo, starfield, holographic cyan
 *
 * Defaults:
 *   • /mission*  → observatory
 *   • everything else → office
 *
 * Variable naming convention: `--theme-<category>-<role>` so we never
 * collide with Tailwind's own `--color-*` family from `globals.css`.
 */

/* ─────────────  OFFICE — wood desk + brass + paper  ───────────── */
:root[data-theme='office'] {
    --theme-bg-base:       #5a3818;
    --theme-bg-grain:      #4a2e18;
    --theme-bg-vignette:   rgba(20, 10, 0, 0.5);

    --theme-paper:         #f7f5ee;
    /* v6.1.0-beta.6 — paper-fg = "the color to use as TEXT when
       you're rendering on a NON-paper background (e.g. the canvas)
       and want a paper-tone look." Always LIGHT across all themes.
       In Office it's a cream paper-tone (essentially same as paper).
       In Observatory paper is inverted to dark indigo (for surfaces)
       but text using paper-as-color was invisible on the dark canvas
       → paper-fg gives those text sites a stable light color. */
    --theme-paper-fg:      #f3e9d0;
    --theme-paper-line:    #d8d3c2;

    --theme-ink:           #1a1f2e;
    --theme-ink-soft:      #6a5a44;

    --theme-metal:         #c4a35a;          /* brass */
    --theme-metal-bright:  #f3d27a;
    --theme-metal-dark:    #8a6a3a;
    --theme-bolt:          #2a1808;

    --theme-leather:       #4a2818;
    --theme-leather-edge:  #2a1408;
    --theme-leather-stitch:#d4a060;
    --theme-leather-tag:   #6e3a18;

    --theme-accent:        #c45a30;          /* lamp glow */
    --theme-shadow:        rgba(20, 10, 0, 0.45);

    --theme-sticky-yellow: #f5e89c;
    --theme-sticky-pink:   #f5b3b8;
    --theme-sticky-tape:   rgba(245, 235, 200, 0.7);

    --theme-gauge-face:    #f3e9d0;
    --theme-gauge-ring:    #c4a35a;
    --theme-gauge-needle:  #1a0e08;

    --theme-font-display: 'Iowan Old Style', 'Charter', 'Georgia', serif;
    --theme-font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

    /* Beta.4 Wave 9 — derived menu / overlay tokens. */
    --theme-menu-bg:        rgba(58, 36, 18, 0.96);
    --theme-menu-bg-solid:  #4a2818;
    --theme-menu-border:    #8a6a3a;
    --theme-menu-hover:     rgba(244, 215, 145, 0.10);
    --theme-menu-active-bg: #c4a35a;
    --theme-menu-active-fg: #2a1808;
    --theme-menu-overlay:   rgba(20, 10, 0, 0.62);
}

/* ─────────────  WORKSHOP — brushed steel + blueprint + terminal green  ───────────── */
:root[data-theme='workshop'] {
    --theme-bg-base:       #1a2030;
    --theme-bg-grain:      #141925;
    --theme-bg-vignette:   rgba(0, 0, 0, 0.6);

    --theme-paper:         #e8eef4;
    --theme-paper-fg:      #e8eef4;
    --theme-paper-line:    #b8c4d4;

    --theme-ink:           #0c1420;
    --theme-ink-soft:      #4a5870;

    --theme-metal:         #8a9aa8;          /* brushed steel */
    --theme-metal-bright:  #c8d4e0;
    --theme-metal-dark:    #4a5868;
    --theme-bolt:          #0c1420;

    --theme-leather:       #2a3548;
    --theme-leather-edge:  #141a28;
    --theme-leather-stitch:#4ade80;
    --theme-leather-tag:   #3a4658;

    --theme-accent:        #4ade80;          /* terminal green */
    --theme-shadow:        rgba(0, 0, 0, 0.55);

    --theme-sticky-yellow: #d4e8a0;
    --theme-sticky-pink:   #c8a4b8;
    --theme-sticky-tape:   rgba(120, 140, 160, 0.6);

    --theme-gauge-face:    #c8d4e0;
    --theme-gauge-ring:    #8a9aa8;
    --theme-gauge-needle:  #0c1420;

    --theme-font-display: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
    --theme-font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

    /* Beta.4 Wave 9 — derived menu / overlay tokens. */
    --theme-menu-bg:        rgba(26, 32, 48, 0.96);
    --theme-menu-bg-solid:  #2a3548;
    --theme-menu-border:    #4a5868;
    --theme-menu-hover:     rgba(74, 222, 128, 0.10);
    --theme-menu-active-bg: #8a9aa8;
    --theme-menu-active-fg: #0c1420;
    --theme-menu-overlay:   rgba(0, 0, 0, 0.68);
}

/* ─────────────  OBSERVATORY — deep indigo + starfield + holographic cyan  ───────────── */
:root[data-theme='observatory'] {
    --theme-bg-base:       #1a1235;
    --theme-bg-grain:      #0e0820;
    --theme-bg-vignette:   rgba(0, 0, 0, 0.7);

    --theme-paper:         rgba(40, 40, 80, 0.85);
    /* Observatory's surface paper is intentionally DARK indigo for
       the deep-space aesthetic. paper-fg stays LIGHT so any text
       site using "paper-tone color" reads against the canvas. */
    --theme-paper-fg:      #e8e8ff;
    --theme-paper-line:    rgba(160, 200, 255, 0.18);

    --theme-ink:           #e8e8ff;
    --theme-ink-soft:      #a0a8d0;

    --theme-metal:         #6a78a8;          /* polished cobalt */
    --theme-metal-bright:  #a8b8e8;
    --theme-metal-dark:    #3a4878;
    --theme-bolt:          #0a0820;

    --theme-leather:       #2a2050;
    --theme-leather-edge:  #14102e;
    --theme-leather-stitch:#5ee0ff;
    --theme-leather-tag:   #3a3068;

    --theme-accent:        #5ee0ff;          /* holographic cyan */
    --theme-shadow:        rgba(0, 0, 0, 0.7);

    --theme-sticky-yellow: rgba(200, 200, 255, 0.85);
    --theme-sticky-pink:   rgba(255, 180, 220, 0.78);
    --theme-sticky-tape:   rgba(160, 180, 255, 0.45);

    --theme-gauge-face:    rgba(60, 60, 110, 0.85);
    --theme-gauge-ring:    #6a78a8;
    --theme-gauge-needle:  #5ee0ff;

    --theme-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --theme-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Beta.4 Wave 9 — derived menu / overlay tokens. */
    --theme-menu-bg:        rgba(20, 16, 46, 0.96);
    --theme-menu-bg-solid:  #2a2050;
    --theme-menu-border:    #3a4878;
    --theme-menu-hover:     rgba(94, 224, 255, 0.12);
    --theme-menu-active-bg: #6a78a8;
    --theme-menu-active-fg: #0a0820;
    --theme-menu-overlay:   rgba(0, 0, 0, 0.78);
}

/* ─────────────  Beta.4 Wave 9 — shared menu / overlay primitives  ─────────────
   These animations + classes provide a single source of truth for menus,
   dropdowns, popovers, modals and toasts. Components reference them so the
   visual language (radius, shadow, blur, fade-scale-in) stays consistent.
*/

@keyframes titan-menu-in {
    from { opacity: 0; transform: scale(0.98) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes titan-toast-in {
    from { opacity: 0; transform: translateX(20px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
}

@keyframes titan-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.titan-menu-surface {
    background: var(--theme-menu-bg);
    border: 1px solid var(--theme-menu-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px var(--theme-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--theme-ink);
    font-family: var(--theme-font-display);
    animation: titan-menu-in 150ms ease-out;
}

.titan-menu-item {
    padding: 8px 12px;
    color: var(--theme-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--theme-font-display);
    transition: background 140ms ease, color 140ms ease;
    text-align: left;
    width: 100%;
}

.titan-menu-item:hover:not(:disabled) {
    background: var(--theme-menu-hover);
}

.titan-menu-item[aria-selected='true'],
.titan-menu-item[data-active='true'] {
    background: var(--theme-menu-active-bg);
    color: var(--theme-menu-active-fg);
}

.titan-menu-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.titan-menu-overlay {
    background: var(--theme-menu-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: titan-overlay-in 150ms ease-out;
}

.titan-modal-surface {
    background: var(--theme-menu-bg-solid);
    border: 1px solid var(--theme-menu-border);
    border-radius: 10px;
    box-shadow: 0 16px 48px var(--theme-shadow), 0 0 0 1px var(--theme-leather-edge);
    color: var(--theme-ink);
    font-family: var(--theme-font-display);
    animation: titan-menu-in 180ms ease-out;
}

.titan-toast-surface {
    background: var(--theme-menu-bg);
    border: 1px solid var(--theme-menu-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px var(--theme-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--theme-ink);
    font-family: var(--theme-font-display);
    animation: titan-toast-in 200ms ease-out;
}

.titan-close-btn {
    color: var(--theme-ink-soft);
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.titan-close-btn:hover {
    color: var(--theme-ink);
    background: var(--theme-menu-hover);
}
