/* ============================================================
   Qvasir marketing site — theme tokens
   Derived from the Qvasir product design system (design-tokens
   package). Hue rules carried over from the product:
     - gold   = brand identity + hero CTA ONLY
     - teal   = interactive primary (links, buttons)
     - warm hues reserved for severity semantics
   Light theme is the marketing default; dark mirrors the app.
   ============================================================ */

:root {
    /* Brand primitives (theme-invariant) */
    --gold: #F1D00A;
    --teal: #55AAB2;
    --teal-deep: #3E8A92;      /* AA-adjusted teal for text/links on light */
    --navy-950: #0A1A38;
    --navy-900: #0D2042;
    --navy-800: #16294F;
    --navy-700: #21325E;
    --navy-600: #2E3F63;
    --navy-500: #3B4E78;

    --sev-critical: #F47B74;
    --sev-high: #FFB74D;
    --sev-medium: #E7C55A;
    --sev-low: #CBD681;
    --sev-info: #55AAB2;
    --ok-green: #66BB6A;
    --info-blue: #5B9DE0;
    --indigo: #828DF8;
    --lilac: #B39DDB;

    /* Light theme (default) */
    --bg-sunken: #EDF0F5;
    --bg-base: #F7F9FC;
    --bg-raised: #FFFFFF;
    --bg-navy-panel: var(--navy-900);   /* dark feature panels on light pages */
    --text-primary: #16294F;
    --text-secondary: #46566F;
    --text-muted: #6B7A90;
    --text-on-navy: #F0F0F0;
    --text-on-navy-secondary: #C3CCDA;
    --border-subtle: #D8DFE9;
    --border-strong: #B9C4D4;
    --link: #2E6FB0;
    --cta-bg: var(--gold);
    --cta-text: #1A1A0A;
    --accent-interactive: var(--teal-deep);
    --hero-grad-a: #0D2042;
    --hero-grad-b: #21325E;
    --shadow-card: 0 1px 2px rgba(13, 32, 66, 0.06), 0 8px 24px rgba(13, 32, 66, 0.08);
}

:root[data-theme="dark"] {
    --bg-sunken: var(--navy-950);
    --bg-base: var(--navy-900);
    --bg-raised: var(--navy-800);
    --bg-navy-panel: var(--navy-950);
    --text-primary: #F0F0F0;
    --text-secondary: #C3CCDA;
    --text-muted: #8899AA;
    --text-on-navy: #F0F0F0;
    --text-on-navy-secondary: #C3CCDA;
    --border-subtle: var(--navy-600);
    --border-strong: var(--navy-500);
    --link: #5B9DE0;
    --accent-interactive: var(--teal);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}