/* ================================================================
   DESIGN TOKENS — global, single source of truth
   ----------------------------------------------------------------
   Two layers:
     1. PRIMITIVE  — raw palette / scales (never used directly in components)
     2. SEMANTIC   — intent tokens (components consume ONLY these)
   Plus BACK-COMPAT aliases so existing stylesheets (builder-legacy.css,
   tokens.css) keep working during migration.

   CSS custom properties declared on :root INHERIT through the shadow DOM,
   so every web component can read these via var(--token) with no per-host
   redefinition. Theme/per-app accent = override a semantic token only.
   ================================================================ */
:root {
    /* @generated:tokens :root */
    /* ---- 1. PRIMITIVE palette ---- */
    --c-violet-50: #f5f3ff;
    --c-violet-100: #ede9fe;
    --c-violet-600: #7c3aed;
    --c-violet-700: #6d28d9;
    --c-blue-50: #eff6ff;
    --c-blue-100: #dbeafe;
    --c-blue-500: #3b82f6;
    --c-blue-600: #2563eb;
    --c-blue-700: #1d4ed8;
    --c-orange-50: #fff7ed;
    --c-orange-100: #ffedd5;
    --c-orange-600: #ea580c;
    --c-orange-700: #c2410c;
    --c-emerald-50: #ecfdf5;
    --c-emerald-100: #d1fae5;
    --c-emerald-600: #059669;
    --c-emerald-700: #047857;
    --c-rose-50: #fff1f2;
    --c-rose-100: #ffe4e6;
    --c-rose-600: #e11d48;
    --c-rose-700: #be123c;
    --c-gray-900: #111827;
    --c-gray-800: #1f2937;
    --c-gray-700: #374151;
    --c-gray-600: #4b5563;
    --c-gray-500: #6b7280;
    --c-gray-400: #9ca3af;
    --c-gray-300: #d1d5db;
    --c-gray-200: #e5e7eb;
    --c-gray-100: #f3f4f6;
    --c-gray-50: #fafafa;
    --c-white: #ffffff;
    --c-red-500: #ef4444;
    --c-green-500: #10b981;
    --c-green-50: #ecfdf5;
    --c-amber-500: #f59e0b;
    /* ---- dark on-tint status TEXT (AA on pale fills) ---- */
    --c-emerald-800: #065f46;
    --c-amber-800: #92400e;
    --c-red-800: #991b1b;

    /* ---- 2a. BRAND SEED — the single switchable accent lever ----
       A preset only sets TWO solid values (--brand, --brand-strong). The two
       tint surfaces (--brand-soft, --brand-subtle) are DERIVED from --brand
       against the current page surface (see 2a-derived below), so every brand
       — including a custom team hex — gets a correct LIGHT *and* DARK tint for
       free. No per-preset dark values to maintain.

       To re-skin the whole app:
         • globally  → set data-brand="sunset|violet|ocean|forest|berry" on <html>
         • per team  → override --brand (+ optional --brand-strong) on :root at
                       runtime (applyBrand() does this). Everything "primary"
                       derives from here; no component/page CSS changes.

       Default = SUNSET (orange). We intentionally moved off the heavy violet
       ("AI purple") to a warmer, less saturated default accent. */
    --brand: var(--c-orange-600);
    --brand-strong: var(--c-orange-700);

    /* ---- 2a-derived — tints computed from --brand + the live surface ----
       color-mix is resolved at use-time, so when --color-bg-surface flips in
       dark theme these recompute to a dark-appropriate tint automatically. */
    --brand-soft: color-mix(in srgb, var(--brand) 15%, var(--color-bg-surface));
    --brand-subtle: color-mix(in srgb, var(--brand) 8%,  var(--color-bg-surface));

    /* ---- 2b. SEMANTIC: brand (components consume ONLY these) ---- */
    --color-primary: var(--brand);
    --color-primary-strong: var(--brand-strong);
    --color-primary-soft: var(--brand-soft);
    --color-primary-subtle: var(--brand-subtle);

    /* ---- agent-script canvas (theme-controlled) ----
       FLAT surface (no wash) so a changed block's solid tint reads cleanly — gradients
       muddied the diff. Changed = flat violet fill + a strong left bar. */
    --canvas-surface: var(--color-bg-surface);
    --canvas-changed-bg: var(--brand-subtle);
    --canvas-changed-bar: var(--color-primary);

    /* ---- SEMANTIC: surfaces / text / border ---- */
    --color-bg-page: var(--c-gray-50);
    --color-bg-surface: var(--c-white);
    --color-bg-subtle: var(--c-gray-50);
    --color-bg-hover: var(--c-gray-100);
    --color-text: var(--c-gray-900);
    --color-text-muted: var(--c-gray-500);
    --color-text-subtle: var(--c-gray-400);
    --color-border: var(--c-gray-200);
    --color-border-strong: var(--c-gray-300);
    --color-line: #f0f1f4; /* hairline — lighter than border, for in-card dividers */

    /* ---- SEMANTIC: status (fg + tinted surface, both theme-aware) ----
       -strong = dark on-tint TEXT: the bright fg above is for icons/borders/dots
       and is illegible as text on its own pale -bg fill (fails WCAG AA). Use
       -strong for status TEXT on a -bg surface. Flips to the bright fg in dark
       theme, where the tint background is dark. */
    --color-success: var(--c-green-500);
    --color-success-strong: var(--c-emerald-800);
    --color-success-bg: var(--c-green-50);
    --color-warning: var(--c-amber-500);
    --color-warning-strong: var(--c-amber-800);
    --color-warning-bg: #fffbeb;
    --color-danger: var(--c-red-500);
    --color-danger-strong: var(--c-red-800);
    --color-danger-bg: #fef2f2;
    --color-info: var(--c-blue-500);
    --color-info-bg: var(--c-blue-50);

    /* ---- SEMANTIC: sidebar ----
       Light surface; a dark sidebar is opt-in per-theme via overrides, and the
       dark base overrides the whole family in [data-theme="dark"]. */
    --color-sidebar-bg: var(--c-white);
    --color-sidebar-bg-hover: var(--c-gray-100);
    --color-sidebar-bg-active: #eef2ff;
    --color-sidebar-text: var(--c-gray-900);
    --color-sidebar-text-muted: var(--c-gray-500);
    --color-sidebar-accent: var(--c-blue-500);
    --color-sidebar-border: var(--c-gray-200);

    /* ---- radius / shadow / type / metrics ---- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-pill: 100px;
    --shadow-sm: 0 1px 2px rgba(17,24,39,.04),0 1px 1px rgba(17,24,39,.03);
    --shadow-md: 0 2px 8px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);
    --shadow-lg: 0 8px 24px rgba(17,24,39,.08);
    --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    --font-mono: 'SF Mono',Monaco,Consolas,'Liberation Mono',monospace;
    /* ---- type scale (rem; resolves in shadow roots that adopt THIS sheet) — mirrors legacy agentpulse-variables.css ---- */
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: .9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    /* ---- spacing scale (px steps; resolves in shadow roots that adopt THIS sheet) — 4px base ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --header-h: 56px;
    --sidebar-w: 256px;
    --sidebar-w-collapsed: 64px;

    /* ---- mobile ----
       Phone breakpoint = max-width: 768px (--bp-phone), the value the header + sidebar already ship.
       Custom properties cannot be read inside @media, so the literal repeats in every phone query;
       scripts/check-mobile-foundation.mjs keeps the shell and phone.css on this one value.
       Hit areas follow the POINTER, not the width: @media (pointer: coarse) raises targets to
       --tap-min, so a narrow desktop window keeps its density.
       Safe-area insets are 0 unless a page opts into viewport-fit=cover (installed app / native
       shell); --safe-top is for the header once that lands (MF-3).
       --page-pad is the <app-layout> content gutter (--space-6 resolves to 24px via
       agentpulse-variables.css). --fab-clear is the room the floating Assistant pill takes at the
       bottom-right on phones, for anything pinned to the bottom edge (toasts). --fab-clear-x is the
       room it takes at the right on wider screens (pill width + its inset − the frame gutter + a gap), kept
       free at the end of the kit's sticky action bar.
       --text-min-phone is the smallest text the kit renders on phones; px, not rem, because
       agentpulse-variables.css redefines the rem-based --text-xs. */
    --bp-phone: 768px;
    --tap-min: 44px;
    --text-min-phone: 12px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --page-pad: var(--space-6);
    --fab-clear: 0px;
    --fab-clear-x: 168px;

    /* ---- overlay layers (z-index), the one stacking order for every shared overlay ----
       The shell header (<app-layout>) sits above page content, so its menus paint over it, and below every overlay.
       The floating Assistant (pill, progress chip, panel) sits BELOW every drawer, modal, toast and menu, so an
       open overlay is never covered by it; a modal opened from a drawer stacks above that drawer. Page content
       stays below all of these. These only order elements in the same stacking context: <app-layout>'s .content
       makes none, so an overlay rendered inside page content gets this order against the header and the pill just
       as one moved to <body> does. Page content keeps its z-indexes below --layer-header.
       agentpulse-variables.css's in-page --z-dropdown (100, header menus — inside the header's own layer) and
       --z-sticky (200, desktop sidebar) sit below --layer-header; its --z-modal / --z-toast are aliases of the
       layers here. */
    --layer-header: 800;
    --layer-assistant: 900;
    --layer-drawer: 950;
    --layer-modal: 1000;
    --layer-toast: 1100;
    --layer-menu: 4000;

    /* ---- 3. BACK-COMPAT aliases (legacy names → semantic tokens) ---- */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-strong);
    --primary-light: var(--color-primary-soft);
    --primary-lighter: var(--color-primary-subtle);
    --bg-page: var(--color-bg-page);
    --bg-surface: var(--color-bg-surface);
    --bg-primary: var(--color-bg-surface); /* header surface; theme-aware */
    --bg-subtle: var(--color-bg-subtle);
    --bg-hover: var(--color-bg-hover);
    --border: var(--color-border);
    --border-strong: var(--color-border-strong);
    --text-default: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-light: var(--color-text-subtle);
    --success: var(--color-success);
    --success-bg: var(--color-success-bg);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --r-sm: var(--radius-sm);
    --r-md: var(--radius-md);
    --r-lg: var(--radius-lg);
    --r-xl: var(--radius-xl);
    --r-pill: var(--radius-pill);
    --s-shadow-sm: var(--shadow-sm);
    --s-shadow-md: var(--shadow-md);
    --s-shadow-lg: var(--shadow-lg);
    /* @end-generated */
}

/* ================================================================
   BRAND PRESETS — flip the whole app's accent with one attribute.
   Set on <html>:  document.documentElement.setAttribute('data-brand','sunset')
   Each preset sets only the two SOLID tokens; --brand-soft/-subtle derive from
   them against the live surface (see 2a-derived), so every preset works in both
   light AND dark theme with no per-preset dark values.
   These stack with data-theme — order-independent, both live on <html>.
   Default (no attribute) = sunset/orange.
   ================================================================ */
:root[data-brand="sunset"] {
    /* @generated:tokens :root[data-brand="sunset"] */
    --brand: var(--c-orange-600);
    --brand-strong: var(--c-orange-700);
    /* @end-generated */
}  /* default */
:root[data-brand="violet"] {
    /* @generated:tokens :root[data-brand="violet"] */
    --brand: var(--c-violet-600);
    --brand-strong: var(--c-violet-700);
    /* @end-generated */
}
:root[data-brand="ocean"]  {
    /* @generated:tokens :root[data-brand="ocean"] */
    --brand: var(--c-blue-600);
    --brand-strong: var(--c-blue-700);
    /* @end-generated */
}
:root[data-brand="forest"] {
    /* @generated:tokens :root[data-brand="forest"] */
    --brand: var(--c-emerald-600);
    --brand-strong: var(--c-emerald-700);
    /* @end-generated */
}
:root[data-brand="berry"]  {
    /* @generated:tokens :root[data-brand="berry"] */
    --brand: var(--c-rose-600);
    --brand-strong: var(--c-rose-700);
    /* @end-generated */
}

@media (max-width: 768px) {
    :root {
        /* @generated:tokens @media (max-width: 768px) :root */
        --page-pad: var(--space-4);
        --fab-clear: 88px;
        --fab-clear-x: 0px;
        /* @end-generated */
    }
}

/* With the header launcher (assistant-panel setting launcher=header; <assistant-panel> marks <html data-ap-launcher>)
   there is no floating pill, so nothing keeps room for it — at every width (this selector outranks the phone :root). */
:root[data-ap-launcher="header"] { --fab-clear:0px; --fab-clear-x:0px; }

/* Embedded in the AgentPulse phone app (<html data-ap-host="native">, contract C8): the app draws the header and there
   is no Assistant, so nothing keeps room for either — workspaces and toasts measure from the top of the WebView — and
   the overscroll area is the page surface, not the (absent) header's. */
:root[data-ap-host="native"] { --header-height:0px; --fab-clear:0px; --fab-clear-x:0px; background-color:var(--color-bg-page); }

/* Match the root <html> background to the header surface so the overscroll /
   pre-paint area matches the header in both themes. Updates on theme switch. */
html {
    background-color: var(--bg-primary, var(--color-bg-surface));
}

/* ================================================================
   DARK THEME — activated by document.documentElement[data-theme="dark"]
   Only semantic tokens are overridden; components are untouched.
   Light is the default (no override needed).
   ================================================================ */
:root[data-theme="dark"] {
    /* @generated:tokens :root[data-theme="dark"] */
    /* ---- brand tints ----
       Boost brand-tint mix on dark surfaces so soft/subtle fills stay visible
       (a 15% mix into near-black reads too faint). Solid --brand is unchanged. */
    --brand-soft: color-mix(in srgb, var(--brand) 28%, var(--color-bg-surface));
    --brand-subtle: color-mix(in srgb, var(--brand) 16%, var(--color-bg-surface));

    --color-bg-page: #0b0f17;
    --color-bg-surface: #161b25;
    --color-bg-subtle: #111827;
    --color-bg-hover: #1f2937;
    --color-text: #f3f4f6;
    --color-text-muted: #9ca3af;
    --color-text-subtle: #6b7280;
    --color-border: #2a3242;
    --color-border-strong: #3b4456;
    --color-line: #222a37;

    /* ---- status ----
       status fg brightened + surfaces become low-alpha tints so they read on the
       dark page instead of the pale light fills (which looked washed out). */
    --color-success: #34d399;
    --color-success-strong: #6ee7b7; /* on dark low-alpha tint, brighter reads as text */
    --color-success-bg: rgba(16,185,129,.16);
    --color-warning: #fbbf24;
    --color-warning-strong: #fcd34d;
    --color-warning-bg: rgba(245,158,11,.16);
    --color-danger: #f87171;
    --color-danger-strong: #fca5a5;
    --color-danger-bg: rgba(239,68,68,.16);
    --color-info: #60a5fa;
    --color-info-bg: rgba(59,130,246,.16);

    /* ---- sidebar ----
       sidebar stays dark in both themes (Cloudflare style), slightly deeper in dark */
    --color-sidebar-bg: #0b0f17;
    --color-sidebar-bg-hover: #1f2937;
    --color-sidebar-bg-active: #000000;
    --color-sidebar-border: rgba(255,255,255,0.06);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 8px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.5);

    /* ---- canvas ----
       canvas tuned for dark surfaces — flat surface, changed block = subtle brand fill + bar.
       Brand-derived so it re-skins with the active accent (was hardcoded violet). */
    --canvas-surface: var(--color-bg-surface);
    --canvas-changed-bg: color-mix(in srgb, var(--brand) 18%, var(--color-bg-surface));
    --canvas-changed-bar: var(--color-primary);
    /* @end-generated */
}