/* =============================================================================
   BASE.CSS — Design System Foundation
   AI Supply Chain Dashboard
   Created: 2025-02-27

   PURPOSE: Single source of truth for all design tokens, resets, and
   foundational layout primitives shared across every page.

   USAGE: Import this first in every page's main.css (or via Vite entry).
   @import './base.css';

   REVERT: If removing this file, copy :root vars and body/grid styles
   back inline into each HTML's <style> tag (pre-modularisation state).
   ============================================================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;600;700&family=Syne:wght@700;800&display=swap');

/* =============================================================================
   DESIGN TOKENS
   All hardcoded hex values across the codebase trace back to these vars.
   Page-specific accent colours are defined in each page's own CSS file.
   ============================================================================= */
:root {
    /* Backgrounds */
    --bg:           #050507;     /* page background */
    --card:         #0c0c10;     /* card / tile surface */
    --card-raised:  #0a0a0f;     /* modal, elevated surface */

    /* Borders */
    --border:       #1a1a24;     /* default border */
    --border-mid:   #222230;     /* slightly brighter border on hover */
    --border-hi:    rgba(255,255,255,0.1); /* high contrast border on active */

    /* Text */
    --text-dim:     #525252;     /* muted labels, timestamps */
    --text-mid:     #71717a;     /* secondary values */
    --text-base:    #a1a1aa;     /* body text */
    --text-hi:      #e5e5e5;     /* primary text, ticker symbols */

    /* Semantic colours */
    --gain:         #10b981;     /* green — positive change */
    --gain-dim:     rgba(16,185,129,0.1);
    --gain-glow:    rgba(16,185,129,0.12);
    --gain-mid:     #34d399;     /* lighter green (score-4) */

    --loss:         #ef4444;     /* red — negative change */
    --loss-dim:     rgba(239,68,68,0.1);
    --loss-glow:    rgba(239,68,68,0.12);

    /* Accent colours — overridden per-page (see page CSS files) */
    --acc:          #3b82f6;     /* default: blue (index / landing page) */
    --acc-dim:      rgba(59,130,246,0.08);
    --acc-glow:     rgba(59,130,246,0.15);

    /* Score colours — shared across all pages */
    --score-5-fg:   #10b981;
    --score-5-bg:   rgba(16,185,129,0.15);
    --score-4-fg:   #34d399;
    --score-4-bg:   rgba(52,211,153,0.1);
    --score-3-fg:   #fbbf24;
    --score-3-bg:   rgba(251,191,36,0.1);
    --score-2-fg:   #f97316;
    --score-2-bg:   rgba(249,115,22,0.1);
    --score-1-fg:   #fb923c;
    --score-1-bg:   rgba(251,146,60,0.08);
    --score-0-fg:   #ef4444;
    --score-0-bg:   rgba(239,68,68,0.15);

    /* Typography */
    --font-data:    'JetBrains Mono', monospace;  /* all financial data */
    --font-body:    'Inter', sans-serif;           /* prose, labels */
    --font-display: 'Syne', sans-serif;            /* large display headers */
}

/* =============================================================================
   RESET & BOX MODEL
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =============================================================================
   BODY — Dark terminal base
   ============================================================================= */
body {
    background-color: var(--bg);
    color: #d4d4d4;
    font-family: var(--font-data);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Subtle dot/line grid overlay — applied globally */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* =============================================================================
   AMBIENT GLOW — radial gradient behind header area
   Colour is overridden per-page via .ambient-glow custom property or class.
   Default: blue (index page). Each page CSS file overrides background.
   ============================================================================= */
.ambient-glow {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, var(--ambient-colour, rgba(59,130,246,0.06)) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* =============================================================================
   PAGE WRAPPER — content sits above grid overlay
   ============================================================================= */
.page-wrap {
    position: relative;
    z-index: 10;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Narrower wrapper for index/landing page */
.page-wrap--narrow {
    max-width: 1100px;
    padding: 64px 24px 96px;
}

/* =============================================================================
   UTILITY — gain / loss colour helpers
   Used inline on spans throughout all pages.
   ============================================================================= */
.gain  { color: var(--gain); }
.loss  { color: var(--loss); }
.dim   { color: var(--text-dim); }
.mid   { color: var(--text-mid); }
.hi    { color: var(--text-hi); }

/* =============================================================================
   SCROLLBAR — thin dark style applied globally
   ============================================================================= */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #2a2a38; }

/* =============================================================================
   SHARED NAV BAR — used on all pages
   Added 2026-03-01. Replaces per-page inline nav styles.
   To revert: remove this block and restore inline styles in each page.
   ============================================================================= */
.top-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px; flex-wrap: nowrap;
}
.brand      { text-decoration: none; }
.brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text-hi); line-height: 1; }
.brand-name span { color: #f59e0b; }

.nav-links { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.nav-link  {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-data); font-size: 9px; font-weight: 700;
    letter-spacing: 0.06em; padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--border); color: var(--text-mid);
    text-decoration: none; transition: all 0.2s; white-space: nowrap;
    background: var(--card); flex-shrink: 0;
}
.nav-link:hover        { border-color: var(--border-mid); color: var(--text-hi); }
.nav-link.active-amber { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.08); }
.nav-link.active-blue  { border-color: #60a5fa; color: #60a5fa; background: rgba(96,165,250,0.08); }
.nav-link.active-green { border-color: #34d399; color: #34d399; background: rgba(52,211,153,0.08); }
.nav-link.active-purple{ border-color: #a78bfa; color: #a78bfa; background: rgba(167,139,250,0.08); }
.nav-link.active-orange{ border-color: #f97316; color: #f97316; background: rgba(249,115,22,0.08); }
.nav-link.active-sky   { border-color: #38bdf8; color: #38bdf8; background: rgba(56,189,248,0.08); }