/* ============================================================================================================
   VONDL design tokens - the single source of truth for every app of the suite and the public website.
   Values come from vondl.com: the coral -> orange -> yellow gradient, navy darks, warm off-whites, Space Grotesk
   headings over Inter body text, pill buttons and soft glass.

   Three tiers:
     1. Primitives   --v-coral-500, --v-navy-900 ...   raw brand values; nothing outside this file uses them directly
     2. Semantic     --v-bg, --v-surface, --v-text ... what a colour is for; these switch in dark mode
     3. Scales       --v-space-*, --v-radius-*, --v-font-size-*, --v-shadow-*, --v-ease

   Rule: app and site CSS use tier 2 and 3 only. Never a hex value outside this file.
   ============================================================================================================ */

:root {
    /* --- 1. Primitives ----------------------------------------------------------------------------------- */
    --v-coral-300: #F4B0B0;
    --v-coral-500: #E88D8D;
    --v-coral-600: #D4726E;
    --v-coral-700: #B85652;
    --v-orange-300: #F5C49A;
    --v-orange-500: #F0A868;
    --v-orange-700: #C77A36;
    --v-yellow-300: #F9E8A0;
    --v-yellow-500: #F5D76E;

    --v-navy-600: #0F3460;
    --v-navy-700: #16213E;
    --v-navy-800: #1A1A2E;
    --v-navy-900: #0F0F23;
    --v-navy-950: #0A0A1A;

    --v-slate-900: #2C3E50;
    --v-slate-500: #7F8C9B;
    --v-slate-400: #A0AEC0;
    --v-slate-200: #E3E7ED;
    --v-slate-100: #F1F3F6;

    --v-cream-50: #FFFAF5;
    --v-cream-100: #FFF8F0;
    --v-cream-200: #F7EDE2;
    --v-white: #FFFFFF;

    --v-green-600: #1F9D55;
    --v-green-100: #E3F6EA;
    --v-amber-600: #B7791F;
    --v-amber-100: #FDF1DC;
    --v-red-600: #C53030;
    --v-red-100: #FDE8E8;
    --v-blue-600: #2B6CB0;
    --v-blue-100: #E3EEFA;

    /* --- Brand gradients (vondl.com) -------------------------------------------------------------------- */
    --v-gradient: linear-gradient(135deg, var(--v-coral-500), var(--v-orange-500), var(--v-yellow-500));
    --v-gradient-warm: linear-gradient(135deg, var(--v-coral-300), var(--v-orange-300), var(--v-yellow-300));
    --v-gradient-dark: linear-gradient(135deg, var(--v-navy-800), var(--v-navy-700), var(--v-navy-600));
    --v-gradient-coral: linear-gradient(135deg, var(--v-coral-500), var(--v-orange-500));
    --v-gradient-sun: linear-gradient(135deg, var(--v-orange-500), var(--v-yellow-500));

    /* --- 2. Semantic (light) ---------------------------------------------------------------------------- */
    --v-bg: var(--v-white);
    --v-bg-subtle: var(--v-cream-50);
    --v-bg-muted: var(--v-cream-200);
    --v-bg-inverse: var(--v-navy-800);
    --v-bg-deep: var(--v-navy-950);
    --v-surface: var(--v-white);
    --v-surface-raised: var(--v-white);
    --v-surface-hover: var(--v-cream-100);
    --v-field: var(--v-white);

    --v-text: var(--v-slate-900);
    --v-text-strong: var(--v-navy-800);
    --v-text-secondary: var(--v-slate-500);
    --v-text-muted: var(--v-slate-400);
    --v-text-inverse: var(--v-white);
    --v-text-on-brand: var(--v-white);
    --v-text-link: var(--v-coral-600);

    --v-accent: var(--v-coral-500);
    --v-accent-strong: var(--v-coral-600);
    --v-accent-soft: color-mix(in srgb, var(--v-coral-500) 12%, transparent);

    --v-border: rgba(26, 26, 46, 0.08);
    --v-border-strong: rgba(26, 26, 46, 0.16);
    --v-border-focus: var(--v-coral-500);

    --v-good: var(--v-green-600);
    --v-good-soft: var(--v-green-100);
    --v-warn: var(--v-amber-600);
    --v-warn-soft: var(--v-amber-100);
    --v-crit: var(--v-red-600);
    --v-crit-soft: var(--v-red-100);
    --v-info: var(--v-blue-600);
    --v-info-soft: var(--v-blue-100);

    --v-glass: rgba(255, 255, 255, 0.70);
    --v-glass-edge: rgba(255, 255, 255, 0.40);
    --v-glass-dark: rgba(255, 255, 255, 0.06);
    --v-glass-dark-edge: rgba(255, 255, 255, 0.10);
    --v-glass-blur: 20px;

    /* --- 3. Scales -------------------------------------------------------------------------------------- */
    --v-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --v-font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --v-font-mono: 'Space Grotesk', ui-monospace, 'Cascadia Code', monospace;

    --v-font-size-xs: 0.75rem;
    --v-font-size-sm: 0.875rem;
    --v-font-size-md: 1rem;
    --v-font-size-lg: 1.125rem;
    --v-font-size-xl: 1.25rem;
    --v-font-size-2xl: 1.5rem;
    --v-font-size-3xl: 2rem;
    --v-font-size-display: clamp(2rem, 4vw, 2.8rem);

    --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-10: 40px;
    --v-space-12: 48px;
    --v-space-16: 64px;

    --v-radius-sm: 8px;
    --v-radius-md: 16px;
    --v-radius-lg: 24px;
    --v-radius-xl: 32px;
    --v-radius-ctl: 10px;
    --v-radius-pill: 50px;

    --v-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --v-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05);
    --v-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.07);
    --v-shadow-pop: 0 12px 40px rgba(15, 15, 35, 0.14);
    --v-shadow-glow: 0 4px 20px rgba(232, 141, 141, 0.15);

    --v-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --v-duration: 0.3s;
    --v-duration-slow: 0.6s;

    --v-container: 1200px;
    --v-topbar-h: 60px;
    --v-rail-w: 240px;
    --v-focus-ring: 0 0 0 3px color-mix(in srgb, var(--v-coral-500) 35%, transparent);

    color-scheme: light;
}

/* --- Dark mode: its own steps from the same ramps, for app screens (the public site keeps its own mix) ----- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --v-bg: var(--v-navy-900);
        --v-bg-subtle: var(--v-navy-950);
        --v-bg-muted: #202038;
        --v-bg-inverse: var(--v-cream-50);
        --v-surface: var(--v-navy-800);
        --v-surface-raised: #222239;
        --v-surface-hover: #25253F;
        --v-field: #14142A;
        --v-text: #E6E8EE;
        --v-text-strong: var(--v-white);
        --v-text-secondary: #A7AFBD;
        --v-text-muted: #7E879A;
        --v-text-inverse: var(--v-navy-800);
        --v-text-link: var(--v-coral-300);
        --v-accent-soft: color-mix(in srgb, var(--v-coral-500) 18%, transparent);
        --v-border: rgba(255, 255, 255, 0.08);
        --v-border-strong: rgba(255, 255, 255, 0.16);
        --v-good-soft: rgba(31, 157, 85, 0.16);
        --v-warn-soft: rgba(183, 121, 31, 0.18);
        --v-crit-soft: rgba(197, 48, 48, 0.18);
        --v-info-soft: rgba(43, 108, 176, 0.2);
        --v-glass: rgba(26, 26, 46, 0.72);
        --v-glass-edge: rgba(255, 255, 255, 0.08);
        --v-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --v-bg: var(--v-navy-900);
    --v-bg-subtle: var(--v-navy-950);
    --v-bg-muted: #202038;
    --v-bg-inverse: var(--v-cream-50);
    --v-surface: var(--v-navy-800);
    --v-surface-raised: #222239;
    --v-surface-hover: #25253F;
    --v-field: #14142A;
    --v-text: #E6E8EE;
    --v-text-strong: var(--v-white);
    --v-text-secondary: #A7AFBD;
    --v-text-muted: #7E879A;
    --v-text-inverse: var(--v-navy-800);
    --v-text-link: var(--v-coral-300);
    --v-accent-soft: color-mix(in srgb, var(--v-coral-500) 18%, transparent);
    --v-border: rgba(255, 255, 255, 0.08);
    --v-border-strong: rgba(255, 255, 255, 0.16);
    --v-good-soft: rgba(31, 157, 85, 0.16);
    --v-warn-soft: rgba(183, 121, 31, 0.18);
    --v-crit-soft: rgba(197, 48, 48, 0.18);
    --v-info-soft: rgba(43, 108, 176, 0.2);
    --v-glass: rgba(26, 26, 46, 0.72);
    --v-glass-edge: rgba(255, 255, 255, 0.08);
    --v-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}