/* ==========================================================================
   Investment Path – design system
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

:root {
    --bg:           #0a0d14;
    --bg-glow-1:    rgba(99, 102, 241, 0.14);
    --bg-glow-2:    rgba(34, 211, 238, 0.08);
    --surface:      rgba(22, 26, 38, 0.72);
    --surface-solid:#161a26;
    --surface-alt:  rgba(255, 255, 255, 0.04);
    --surface-hover:rgba(255, 255, 255, 0.07);
    --border:       rgba(255, 255, 255, 0.08);
    --border-strong:rgba(255, 255, 255, 0.16);
    --text:         #e8eaf2;
    --text-dim:     #9299b0;
    --text-faint:   #6b7189;
    --accent:       #6366f1;
    --accent-2:     #22d3ee;
    /* Teal as a TEXT colour only. --accent-2 stays bright for borders, glows
       and focus rings, where it sits on or beside a dark fill; as text on a
       light background it reads at about 1.7:1, far under the 4.5:1 floor.
       The light theme darkens this one to ~4.8:1 without touching anything
       structural. */
    --accent-2-text:#22d3ee;
    /* Label colour on a tinted glass control. At 30-ish % alpha the pane
       takes most of its lightness from whatever sits behind it, so this has
       to flip with the theme: white over a dark backdrop, ink over a light
       one. Fixing it to white is what makes low-alpha glass unreadable. */
    --on-glass:     #ffffff;
    --accent-soft:  rgba(99, 102, 241, 0.16);
    --gradient:     linear-gradient(120deg, #6366f1, #22d3ee);
    --green:        #34d399;
    --green-soft:   rgba(52, 211, 153, 0.14);
    --red:          #f87171;
    --red-soft:     rgba(248, 113, 113, 0.12);
    --amber:        #fbbf24;
    --amber-soft:   rgba(251, 191, 36, 0.12);
    --cyan:         #22d3ee;
    --radius:       16px;
    --radius-sm:    10px;
    --shadow:       0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-sm:    0 3px 12px rgba(0, 0, 0, 0.25);
    --sidebar-w:    392px;
    --tooltip-bg:   #232839;
}

[data-theme="light"] {
    --bg:           #eef1f8;
    --bg-glow-1:    rgba(99, 102, 241, 0.10);
    --bg-glow-2:    rgba(34, 211, 238, 0.09);
    --surface:      rgba(255, 255, 255, 0.85);
    --surface-solid:#ffffff;
    --surface-alt:  rgba(15, 23, 42, 0.04);
    --surface-hover:rgba(15, 23, 42, 0.07);
    --border:       rgba(15, 23, 42, 0.10);
    --border-strong:rgba(15, 23, 42, 0.22);
    --text:         #171c2c;
    --text-dim:     #5a6178;
    --text-faint:   #8b91a5;
    /* Tuned to ~1.8:1 against the light background, chosen for the brand
       look. That is well below the WCAG floors (4.5:1 body text, 3:1 large
       text and UI), so these teal labels are decorative-strength contrast:
       never put information here that is not also carried by an adjacent
       element. */
    --accent-2-text:#16c6e3;
    /* Between --text and --text-dim, weighted toward the dim end: near-black
       read as a hard stamp on a pale translucent pane. Lands around 5.4:1 on
       the composited fill – softer, still clear of the 4.5:1 floor.
       --text-dim on its own would be about 3.5:1 and miss it. */
    --on-glass:     color-mix(in srgb, var(--text) 40%, var(--text-dim));
    --accent-soft:  rgba(99, 102, 241, 0.12);
    --shadow:       0 10px 30px rgba(23, 28, 44, 0.10);
    --shadow-sm:    0 3px 12px rgba(23, 28, 44, 0.08);
    --tooltip-bg:   #262b3d;
}

html { height: 100%; }

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    transition: background 0.35s ease, color 0.35s ease;
}

.bg-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(600px 400px at 8% -5%, var(--bg-glow-1), transparent 70%),
        radial-gradient(700px 500px at 100% 0%, var(--bg-glow-2), transparent 70%);
}

.app-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}