/* =========================================================================
   VONDL design tokens — the single source of truth.

   Brand values come from vondl.com (--vondl-* in VONDL.Web/wwwroot/app.css):
   the warm gradient red → orange → yellow, the navy darks and the cream light.
   Every other stylesheet and every component uses var(--v-…); a colour is only
   ever written as a value in this file.

   Accessibility: the brand pastels are too light for text (#E88D8D on white is
   2.4:1). They are used for the gradient, marks, highlights and fills with navy
   text on them (7:1 and up). Text and links use the darker steps below, all
   checked at WCAG AA (4.5:1) or better on their surfaces.
   ========================================================================= */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Primitives (brand) ---- */
    --v-coral-50: #FFF1EF;
    --v-coral-100: #FBE1DE;
    --v-coral-300: #F4B0B0;
    --v-coral-400: #E88D8D;   /* VONDL red */
    --v-coral-500: #D4726E;   /* VONDL red deep */
    --v-coral-600: #C0504D;
    --v-coral-700: #A5413D;
    --v-orange-300: #F5C49A;
    --v-orange-400: #F0A868;  /* VONDL orange */
    --v-yellow-300: #F9E8A0;
    --v-yellow-400: #F5D76E;  /* VONDL yellow */
    --v-navy-950: #0F0F23;    /* VONDL dark surface */
    --v-navy-900: #1A1A2E;    /* VONDL dark */
    --v-navy-800: #16213E;    /* VONDL dark alt */
    --v-navy-700: #0F3460;
    --v-slate-700: #2C3E50;   /* VONDL text */
    --v-slate-500: #5B6776;
    --v-slate-400: #7F8C9B;   /* VONDL text light: large text and icons only */
    --v-slate-300: #A0AEC0;   /* VONDL text muted */
    --v-slate-200: #B9C3D0;
    --v-slate-100: #E6EAF0;
    --v-cream-50: #FFFAF5;    /* VONDL background light */
    --v-cream-100: #FFF8F0;   /* VONDL off-white */
    --v-white: #FFFFFF;

    --v-gradient: linear-gradient(135deg, var(--v-coral-400), var(--v-orange-400), var(--v-yellow-400));
    --v-gradient-soft: linear-gradient(135deg, var(--v-coral-300), var(--v-orange-300), var(--v-yellow-300));

    /* ---- Typography ---- */
    --v-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --v-font-heading: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --v-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --v-text-xs: 12px;
    --v-text-sm: 13px;
    --v-text-md: 14px;
    --v-text-lg: 16px;
    --v-text-xl: 20px;
    --v-text-2xl: 26px;
    --v-text-3xl: 32px;
    --v-leading: 1.5;

    /* ---- Spacing (4 pt) ---- */
    --v-space-1: 4px;
    --v-space-2: 8px;
    --v-space-3: 12px;
    --v-space-4: 16px;
    --v-space-5: 20px;
    --v-space-6: 24px;
    --v-space-8: 32px;
    --v-space-12: 48px;

    /* ---- Radii (vondl.com: 8 / 16 / 24 / 32) ---- */
    --v-radius-xs: 6px;
    --v-radius-sm: 8px;
    --v-radius-md: 12px;
    --v-radius-lg: 16px;
    --v-radius-xl: 24px;
    --v-radius-full: 999px;

    /* ---- Motion ---- */
    --v-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --v-fast: 0.15s;

    /* ---- Layout ---- */
    --v-page-max: 1280px;
    --v-topbar-h: 60px;

    /* =====================================================================
       Semantic colour — light (default)
       ===================================================================== */
    color-scheme: light;
    --v-bg: var(--v-cream-50);
    --v-surface: var(--v-white);
    --v-surface-2: var(--v-cream-100);
    --v-surface-sunk: #F7F1EA;
    --v-hover: rgba(26, 26, 46, 0.04);
    --v-border: rgba(26, 26, 46, 0.10);
    --v-border-strong: rgba(26, 26, 46, 0.22);
    --v-heading: var(--v-navy-900);
    --v-text: var(--v-slate-700);
    --v-text-2: var(--v-slate-500);
    --v-text-3: var(--v-slate-400);
    --v-link: var(--v-coral-700);
    --v-accent: var(--v-coral-600);
    --v-accent-tint: var(--v-coral-50);
    --v-on-brand: var(--v-navy-900);          /* text on the gradient and brand fills */
    --v-inverse-bg: var(--v-navy-900);
    --v-inverse-text: var(--v-white);
    --v-focus: 0 0 0 3px rgba(232, 141, 141, 0.45);
    --v-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --v-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --v-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --v-shadow-glow: 0 4px 20px rgba(232, 141, 141, 0.22);
    --v-scrim: rgba(15, 15, 35, 0.45);

    /* Status: reserved for state, always shown with a label (never colour alone). */
    --v-good: #1F7A52;
    --v-good-tint: rgba(31, 122, 82, 0.10);
    --v-warn: #9A5B06;
    --v-warn-tint: rgba(240, 168, 104, 0.18);
    --v-crit: #B3372B;
    --v-crit-tint: rgba(179, 55, 43, 0.10);
    --v-info: #2F5D9E;
    --v-info-tint: rgba(47, 93, 158, 0.10);
    --v-idle: var(--v-slate-400);
    --v-idle-tint: rgba(91, 103, 118, 0.10);

    /* Charts (validated with the dataviz palette checker against the surface). */
    --v-series-1: #C0504D;
    --v-grid: rgba(26, 26, 46, 0.08);
    --v-band: rgba(91, 103, 118, 0.12);
}

/* =========================================================================
   Semantic colour — dark (vondl.com's navy). Selected, not inverted.
   Follows the OS unless the viewer picked a theme (data-theme on <html>).
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --v-bg: var(--v-navy-950);
        --v-surface: var(--v-navy-800);
        --v-surface-2: var(--v-navy-900);
        --v-surface-sunk: #0B0B1C;
        --v-hover: rgba(255, 255, 255, 0.05);
        --v-border: rgba(255, 255, 255, 0.10);
        --v-border-strong: rgba(255, 255, 255, 0.22);
        --v-heading: var(--v-white);
        --v-text: var(--v-slate-100);
        --v-text-2: var(--v-slate-200);
        --v-text-3: var(--v-slate-300);
        --v-link: var(--v-coral-300);
        --v-accent: var(--v-coral-300);
        --v-accent-tint: rgba(232, 141, 141, 0.12);
        --v-inverse-bg: var(--v-white);
        --v-inverse-text: var(--v-navy-900);
        --v-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
        --v-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
        --v-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
        --v-good: #5FD3A0;
        --v-good-tint: rgba(95, 211, 160, 0.14);
        --v-warn: #F2C063;
        --v-warn-tint: rgba(242, 192, 99, 0.14);
        --v-crit: #FF8A80;
        --v-crit-tint: rgba(255, 138, 128, 0.14);
        --v-info: #8AB4F8;
        --v-info-tint: rgba(138, 180, 248, 0.14);
        --v-idle: var(--v-slate-300);
        --v-idle-tint: rgba(160, 174, 192, 0.14);
        --v-series-1: #DE6F68;
        --v-grid: rgba(255, 255, 255, 0.08);
        --v-band: rgba(160, 174, 192, 0.14);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --v-bg: var(--v-navy-950);
    --v-surface: var(--v-navy-800);
    --v-surface-2: var(--v-navy-900);
    --v-surface-sunk: #0B0B1C;
    --v-hover: rgba(255, 255, 255, 0.05);
    --v-border: rgba(255, 255, 255, 0.10);
    --v-border-strong: rgba(255, 255, 255, 0.22);
    --v-heading: var(--v-white);
    --v-text: var(--v-slate-100);
    --v-text-2: var(--v-slate-200);
    --v-text-3: var(--v-slate-300);
    --v-link: var(--v-coral-300);
    --v-accent: var(--v-coral-300);
    --v-accent-tint: rgba(232, 141, 141, 0.12);
    --v-inverse-bg: var(--v-white);
    --v-inverse-text: var(--v-navy-900);
    --v-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --v-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --v-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
    --v-good: #5FD3A0;
    --v-good-tint: rgba(95, 211, 160, 0.14);
    --v-warn: #F2C063;
    --v-warn-tint: rgba(242, 192, 99, 0.14);
    --v-crit: #FF8A80;
    --v-crit-tint: rgba(255, 138, 128, 0.14);
    --v-info: #8AB4F8;
    --v-info-tint: rgba(138, 180, 248, 0.14);
    --v-idle: var(--v-slate-300);
    --v-idle-tint: rgba(160, 174, 192, 0.14);
    --v-series-1: #DE6F68;
    --v-grid: rgba(255, 255, 255, 0.08);
    --v-band: rgba(160, 174, 192, 0.14);
}