/* Design tokens consumed by signals.css.
 * Copied verbatim from alpha-galactica-old/web/static/css/base.css :root.
 * Kept as a separate file so signals.css can stay unmodified.
 */
:root {
    /* Colors */
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;

    --border-color: #334155;

    /* Accents */
    --accent-cyan: #06B6D4;
    --accent-green: #10B981;
    --accent-green-dark: #059669;
    --accent-red: #F43F5E;
    --accent-purple: #8B5CF6;
    --accent-yellow: #FBBF24;
    --accent-orange: #FB923C;

    /* Soft Accents (Backgrounds) */
    --accent-cyan-soft: rgba(6, 182, 212, 0.2);
    --accent-green-soft: rgba(16, 185, 129, 0.2);
    --accent-red-soft: rgba(244, 63, 94, 0.2);
    --accent-purple-soft: rgba(139, 92, 246, 0.2);
    --accent-yellow-soft: rgba(251, 191, 36, 0.2);
    --accent-orange-soft: rgba(251, 146, 60, 0.2);

    --accent-cyan-dim: rgba(6, 182, 212, 0.1);
    --accent-green-dim: rgba(16, 185, 129, 0.1);
    --accent-red-dim: rgba(244, 63, 94, 0.1);
    --accent-yellow-dim: rgba(251, 191, 36, 0.1);
    --accent-purple-dim: rgba(139, 92, 246, 0.1);
    --accent-orange-dim: rgba(251, 146, 60, 0.1);

    /* Faint Accents */
    --accent-green-faint: rgba(16, 185, 129, 0.05);
    --accent-red-faint: rgba(244, 63, 94, 0.05);

    /* Border Accents (0.3 opacity) */
    --accent-cyan-border: rgba(6, 182, 212, 0.3);
    --accent-green-border: rgba(16, 185, 129, 0.3);
    --accent-red-border: rgba(244, 63, 94, 0.3);
    --accent-yellow-border: rgba(251, 191, 36, 0.3);
    --accent-purple-border: rgba(139, 92, 246, 0.3);
    --accent-orange-border: rgba(251, 146, 60, 0.3);

    /* Medium Accents (Legends/Charts) */
    --accent-green-medium: rgba(16, 185, 129, 0.6);
    --accent-red-medium: rgba(244, 63, 94, 0.6);
    --accent-yellow-medium: rgba(251, 191, 36, 0.6);

    --text-muted-soft: rgba(148, 163, 184, 0.2);

    /* Semantic */
    --color-bullish: var(--accent-green);
    --color-bearish: var(--accent-red);
    --color-warning: var(--accent-yellow);

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;

    /* Font Sizes */
    --text-xxs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Spacing */
    --spacing-xxs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-xs-sm: 0.375rem;
    --spacing-sm: 0.5rem;
    --spacing-sm-md: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;

    /* Layout */
    --container-width: 1200px;
    --header-height: 70px;
    --radius-sm: 4px;
    --radius-md: 8px;

    /* UI Elements */
    --bg-primary-transparent: rgba(15, 23, 42, 0.95);
    --bg-tertiary-transparent: rgba(51, 65, 85, 0.6);
    --border-muted-transparent: rgba(148, 163, 184, 0.3);
}

/* ---- Page-level scaffolding the signals page expects ---- */

.content-section {
    max-width: var(--container-width);
    margin: 0 auto var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.content-section h1,
.content-section h2,
.content-section h3 {
    color: var(--text-primary);
}

.page-title {
    font-size: var(--text-3xl);
    margin: 0 0 var(--spacing-sm);
}

.text-muted    { color: var(--text-muted); }
.text-success  { color: var(--accent-green); }
.text-danger   { color: var(--accent-red); }
.text-green    { color: var(--accent-green); }
.text-red      { color: var(--accent-red); }

/* Override the narrow 760px container that the article pages use,
 * so the signals dashboard has room for the hero strip and tables. */
body.signals-page .container {
    max-width: var(--container-width);
}
