/**
 * QuanterLab Design Tokens — single source of truth for the platform's
 * visual identity. All colours, fonts, spacing, shadows, and re-usable
 * surface primitives live here so a brand tweak is a one-file edit
 * instead of N edits across 30+ module templates.
 *
 * Loaded by:
 *   - wrapper/templates/base.html (every wrapper-rendered page)
 *   - injected into module iframes by the /embed/<code> proxy
 *     (see wrapper/routes.py — Phase 2 of the tokens rollout)
 *
 * Cascading rules (important):
 *   - This file MUST load BEFORE any module's inline <style> so module
 *     overrides win on the cascade. Browser respects source order, so
 *     placement of the <link> in <head> is what enforces this.
 *   - Modules that need a per-tab accent (e.g. Factor Models = teal
 *     green border-primary) override --ql-* on a body class scope, not
 *     on :root, so :root tokens stay the platform-wide defaults.
 *
 * Versioning:
 *   When you change tokens, bump the cache-bust query string applied
 *   in base.html / iframe-injection middleware (search "quanterlab-
 *   tokens.css" across the codebase to find every reference) so
 *   returning visitors fetch the new sheet rather than serving stale
 *   cached values.
 */

/* === Google-hosted display fonts =========================================
 * DM Sans (logo wordmark + branded section labels) and Space Grotesk
 * (fallback display face). Imported once here so every surface inherits
 * them — modules that load them again redundantly will hit the browser
 * cache and add no additional latency.
 * ======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    /* === Brand =========================================================
     * Gold (#c9a962) is the platform's only branded colour. Used for
     * the logo wordmark "LAB", the brand mark, the Quantin AI bubble,
     * the Logout primary CTA, the Builder featured-button tint, and
     * nothing else. Apply it sparingly — once it spreads to section
     * labels and chrome it cheapens the look.
     * ================================================================= */
    --ql-gold: #c9a962;
    --ql-gold-bright: #e2c87d;
    --ql-gold-soft: rgba(201, 169, 98, 0.18);
    --ql-gold-glow: rgba(201, 169, 98, 0.45);

    /* === Surfaces (dark theme) ========================================= */
    --ql-bg-primary: #000000;
    --ql-bg-secondary: #0a0a0a;
    --ql-bg-card: #111111;
    --ql-bg-hover: #1a1a1a;
    --ql-bg-input: #0a0a0a;
    --ql-bg-tertiary: #1a1a1a;

    /* === Borders ======================================================= */
    --ql-border-subtle: rgba(255, 255, 255, 0.07);
    --ql-border-default: rgba(255, 255, 255, 0.16);
    --ql-border-hover: rgba(255, 255, 255, 0.25);

    /* === Text tiers ====================================================
     * Use these for body text only. Section labels use the dedicated
     * --ql-label-* tiers below so we can adjust hierarchy independently
     * of body content opacity.
     * ================================================================= */
    --ql-text-primary: rgba(255, 255, 255, 0.95);
    --ql-text-secondary: rgba(255, 255, 255, 0.65);
    --ql-text-tertiary: rgba(255, 255, 255, 0.45);
    --ql-text-muted: rgba(255, 255, 255, 0.25);

    /* === Section-label hierarchy =======================================
     * Three deliberate tiers, all neutral white at descending opacity
     * so visual hierarchy reads landmark > section > sub WITHOUT
     * needing colour. Gold is reserved for brand moments only.
     *   landmark — ACTIVE EXECUTION, RESEARCH LIBRARY
     *   section  — MEAN REVERSION, SCANNERS, IN-SAMPLE OPTIMIZATION
     *   sub      — Saved Backtests, Analysis Reports, Filters
     * ================================================================= */
    --ql-label-landmark: rgba(255, 255, 255, 0.55);
    --ql-label-section: rgba(255, 255, 255, 0.50);
    --ql-label-sub: rgba(255, 255, 255, 0.45);

    /* === Status colours (semantic, never decorative) ===================
     * Use only when the colour communicates state. e.g. green for a
     * running paper-trading instance, red for an error, never for
     * decorative chrome.
     * ================================================================= */
    --ql-success: #22c55e;
    --ql-success-bright: #4fd66a;
    --ql-error: #ef4444;
    --ql-error-bright: #f85149;
    --ql-warning: #f59e0b;
    --ql-warning-bright: #fbbf24;
    --ql-info: #3b82f6;
    --ql-info-bright: #60a5fa;

    /* === Indicator-class accents =======================================
     * Used by ribbon icon chips to distinguish module categories at a
     * glance: teal Scanner / gold Overlay / purple analysis / blue
     * data / green status / orange momentum / red risk. The "bright"
     * variant is the icon stroke colour, the base is the chip border
     * tint.
     * ================================================================= */
    --ql-accent-teal: #22d3ee;
    --ql-accent-teal-bright: #67e8f9;
    --ql-accent-purple: #a371f7;
    --ql-accent-purple-bright: #d4b3ff;
    --ql-accent-blue: #60a5fa;
    --ql-accent-blue-bright: #a4c5fd;
    --ql-accent-green: #4ade80;
    --ql-accent-green-bright: #6ee7a3;
    --ql-accent-orange: #fbbf24;
    --ql-accent-orange-bright: #fcd34d;
    --ql-accent-red: #f87171;
    --ql-accent-red-bright: #fca5a5;

    /* === Typography ==================================================== */
    --ql-font-display: 'DM Sans', 'Space Grotesk', 'Calibri', 'Segoe UI', sans-serif;
    --ql-font-body: 'Calibri', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --ql-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Courier New', monospace;

    /* Type scale — uses rem so it tracks user font-size preferences */
    --ql-text-xs: 0.625rem;     /* 10px @ 16px root */
    --ql-text-sm: 0.75rem;      /* 12px */
    --ql-text-md: 0.875rem;     /* 14px */
    --ql-text-base: 1rem;       /* 16px */
    --ql-text-lg: 1.125rem;     /* 18px */
    --ql-text-xl: 1.25rem;      /* 20px */
    --ql-text-2xl: 1.5rem;      /* 24px */

    /* Letter-spacing — section-tracking is the wide branded one used by
       every section label across the platform */
    --ql-tracking-tight: -0.011em;
    --ql-tracking-normal: 0;
    --ql-tracking-wide: 0.05em;
    --ql-tracking-section: 0.18em;

    /* === Spacing scale ================================================= */
    --ql-space-1: 4px;
    --ql-space-2: 8px;
    --ql-space-3: 12px;
    --ql-space-4: 16px;
    --ql-space-6: 24px;
    --ql-space-8: 32px;

    /* === Border radii ================================================== */
    --ql-radius-sm: 4px;
    --ql-radius-md: 7px;
    --ql-radius-lg: 12px;

    /* === Shadow primitives ============================================= */
    --ql-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ql-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --ql-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    /* Bevel highlights — used on ribbon buttons + saved-config pills */
    --ql-bevel-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ql-bevel-top-strong: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --ql-bevel-top-featured: inset 0 1px 0 rgba(201, 169, 98, 0.13);
    --ql-bevel-top-featured-strong: inset 0 1px 0 rgba(201, 169, 98, 0.20);

    /* === Surface recipe — the "command panel" gradient + bevel pattern
     * used by every dark-themed chip across the platform: ribbon buttons,
     * sidebar gear/logout, saved-config pills, dropdown triggers, etc.
     * Kept as separate variables so individual layers can be overridden
     * (e.g. .featured replaces only the sheen + border + bevel; the
     * dark body stays).
     *
     * Anatomy of the default surface:
     *   1. Top sheen — neutral white-to-transparent-to-black overlay
     *      gives a subtle vertical highlight from above + darken below
     *   2. Body — deep panel gradient (dark slate-grey to near-black)
     *   3. Border — hairline outer edge
     *   4. Box-shadow — inset top highlight (bevel) + small drop-shadow
     *
     * Anatomy of the featured (gold-tinted) surface:
     *   1. Top sheen replaced with gold-tinted overlay
     *   2. Border replaced with gold-tinted hairline
     *   3. Inset highlight switches to gold tint
     *   4. Hover halo gets stronger gold glow
     * ================================================================= */

    /* Shared dark gradient body — every surface uses this as its base */
    --ql-surface-body: linear-gradient(180deg, rgba(24, 26, 30, 0.85) 0%, rgba(12, 13, 16, 0.92) 100%);

    /* Default neutral top-sheen overlay (white→transparent→black) */
    --ql-surface-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0) 55%,
        rgba(0, 0, 0, 0.10) 100%);

    /* Featured (gold-tinted) top-sheen overlay */
    --ql-surface-sheen-featured: linear-gradient(180deg,
        rgba(201, 169, 98, 0.075) 0%,
        rgba(201, 169, 98, 0.015) 60%);

    /* Border colours — surface chrome edges */
    --ql-surface-border: rgba(255, 255, 255, 0.07);
    --ql-surface-border-hover: rgba(255, 255, 255, 0.18);
    --ql-surface-border-featured: rgba(201, 169, 98, 0.22);
    --ql-surface-border-featured-hover: rgba(201, 169, 98, 0.45);

    /* Combined shadow recipes — drop these straight into box-shadow.
     * CSS variables hold raw token text, and box-shadow accepts a
     * comma-separated list of shadows, so this works as a single var. */
    --ql-shadow-surface: var(--ql-bevel-top), 0 1px 2px rgba(0, 0, 0, 0.4);
    --ql-shadow-surface-hover: var(--ql-bevel-top-strong), 0 4px 14px rgba(0, 0, 0, 0.5);
    --ql-shadow-surface-featured: var(--ql-bevel-top-featured), 0 1px 2px rgba(0, 0, 0, 0.4);
    --ql-shadow-surface-featured-hover: var(--ql-bevel-top-featured-strong), 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 169, 98, 0.18);

    /* Soft outer halo applied on hover for the default surface — adds
     * a touch of brand presence without making it look featured. */
    --ql-glow-hover-soft: 0 0 18px rgba(201, 169, 98, 0.08);

    /* === Transition timing ============================================= */
    --ql-ease-fast: 0.18s ease;
    --ql-ease-default: 0.22s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
 * Re-usable primitives — class-based, opt-in. Component CSS that already
 * achieves these effects via raw values can switch to these progressively
 * without breaking pixel-identical rendering.
 * ======================================================================= */

/* "Command panel" surface — the layered dark gradient + bevel + soft
   shadow used by ribbon-item buttons, sidebar gear/logout, saved-config
   pills, dropdown triggers. Apply via `class="ql-surface-panel"` and
   override only the dimensions / accent colour. */
.ql-surface-panel {
    background: var(--ql-surface-sheen), var(--ql-surface-body);
    border: 1px solid var(--ql-surface-border);
    box-shadow: var(--ql-shadow-surface);
    border-radius: var(--ql-radius-md);
    transition:
        transform var(--ql-ease-default),
        box-shadow var(--ql-ease-default),
        border-color var(--ql-ease-fast);
}

.ql-surface-panel:hover {
    border-color: var(--ql-surface-border-hover);
    box-shadow: var(--ql-shadow-surface-hover);
}

/* Featured / primary-CTA variant — gold-tinted body. Used by Builder
   ribbon buttons + Logout button. */
.ql-surface-panel--featured {
    background: var(--ql-surface-sheen-featured), var(--ql-surface-body);
    border-color: var(--ql-surface-border-featured);
    box-shadow: var(--ql-shadow-surface-featured);
}

.ql-surface-panel--featured:hover {
    border-color: var(--ql-surface-border-featured-hover);
    box-shadow: var(--ql-shadow-surface-featured-hover);
}

/* Themed scrollbar primitive — opt-in via class so we don't blanket
   every scroll surface (charts, code editors, etc. may want their own
   styling). Already applied via raw rules in sidebar.css — those stay
   for backward compat; new code should use the class. */
.ql-scrollbar-themed {
    scrollbar-width: thin;
    scrollbar-color: var(--ql-border-default) transparent;
}
.ql-scrollbar-themed::-webkit-scrollbar { width: 6px; height: 6px; }
.ql-scrollbar-themed::-webkit-scrollbar-track { background: transparent; }
.ql-scrollbar-themed::-webkit-scrollbar-thumb {
    background: var(--ql-border-default);
    border-radius: 3px;
}
.ql-scrollbar-themed::-webkit-scrollbar-thumb:hover {
    background: var(--ql-text-tertiary);
}

/* Section label primitives — three hierarchy tiers. Use the modifier
   class to pick the right tier; the base class supplies the typography.
       <div class="ql-label ql-label--landmark">Active Execution</div>
       <div class="ql-label ql-label--section">Mean Reversion</div>
       <div class="ql-label ql-label--sub">Saved Backtests</div>
   */
.ql-label {
    font-family: var(--ql-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ql-tracking-section);
    line-height: 1;
    user-select: none;
}

.ql-label--landmark {
    font-size: var(--ql-text-sm);
    color: var(--ql-label-landmark);
}

.ql-label--section {
    font-size: 0.6rem;
    color: var(--ql-label-section);
}

.ql-label--sub {
    font-size: 0.65rem;
    color: var(--ql-label-sub);
    letter-spacing: 0.14em;
}

/* Brand wordmark — used by both the sidebar logo and the centred /home
   landing wordmark, so they're guaranteed identical. The "lab" accent
   span gets the gold tint; everything else inherits the translucent
   white. */
.ql-wordmark {
    font-family: var(--ql-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ql-tracking-section);
    line-height: 1;
    color: var(--ql-text-primary);
    opacity: 0.55;
    user-select: none;
    white-space: nowrap;
}

.ql-wordmark .ql-wordmark__accent {
    font-weight: 400;
    color: var(--ql-gold);
    opacity: 0.8;
    margin-left: 1px;
}
