/* ==========================================================================
   Tatvora design tokens
   Single source of truth for colour, type, space, radius, shadow and motion.
   Components never hard-code these values.
   ========================================================================== */

:root {
    /* ---- Brand blue ------------------------------------------------------ */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* ---- Navy: headings and dark surfaces -------------------------------- */
    --navy-900: #060d1f;
    --navy-800: #0a1730;
    --navy-700: #0f2244;
    --navy-600: #16305c;
    --navy-500: #1e3a6b;

    /* ---- Neutrals -------------------------------------------------------- */
    --white: #ffffff;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;

    /* ---- Support --------------------------------------------------------- */
    --cyan-500: #06b6d4;
    --emerald-500: #10b981;
    --emerald-50: #ecfdf5;
    --amber-500: #f59e0b;
    --amber-50: #fffbeb;
    --rose-600: #e11d48;
    --rose-50: #fff1f2;

    /* ---- Semantic -------------------------------------------------------- */
    --brand: var(--blue-600);
    --brand-strong: var(--blue-700);
    --brand-soft: var(--blue-50);
    --heading: var(--navy-800);
    --body: var(--slate-600);
    --muted: var(--slate-500);
    --line: var(--slate-200);
    --line-soft: #edf2f7;
    --surface: var(--white);
    --surface-tint: var(--slate-50);
    --surface-brand: var(--blue-50);

    /* ---- Gradients ------------------------------------------------------- */
    --grad-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 55%, #1a3fb8 100%);
    --grad-navy: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 45%, #12336b 100%);
    --grad-wash: linear-gradient(180deg, #f6f9ff 0%, rgba(255, 255, 255, 0) 100%);
    --grad-text: linear-gradient(120deg, var(--navy-800) 0%, var(--blue-700) 60%, var(--cyan-500) 130%);
    --grad-hairline: linear-gradient(90deg, transparent, var(--blue-200), transparent);

    /* ---- Typography ------------------------------------------------------ */
    --font-sans: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, "Liberation Mono", monospace;

    /* Fluid scale: comfortable on a phone, generous on a large display. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 0.32vw + 1rem, 1.1875rem);
    --text-xl: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
    --text-2xl: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
    --text-3xl: clamp(1.625rem, 1.5vw + 1.25rem, 2.25rem);
    --text-4xl: clamp(2rem, 2.4vw + 1.4rem, 3rem);
    --text-5xl: clamp(2.375rem, 3.4vw + 1.5rem, 3.875rem);

    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-normal: 1.65;

    /* ---- Space ----------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --section-y: clamp(4rem, 7vw, 7.5rem);
    --container: 1200px;
    --container-narrow: 820px;

    /* ---- Radius ---------------------------------------------------------- */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-full: 999px;

    /* ---- Elevation: cool-tinted so shadows sit in the blue family --------- */
    --shadow-xs: 0 1px 2px rgba(15, 34, 68, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 34, 68, 0.06), 0 1px 2px rgba(15, 34, 68, 0.04);
    --shadow: 0 4px 14px rgba(15, 34, 68, 0.07), 0 1px 3px rgba(15, 34, 68, 0.05);
    --shadow-md: 0 10px 28px rgba(15, 34, 68, 0.09), 0 2px 6px rgba(15, 34, 68, 0.05);
    --shadow-lg: 0 22px 55px rgba(15, 34, 68, 0.13), 0 4px 12px rgba(15, 34, 68, 0.06);
    --shadow-brand: 0 12px 30px rgba(37, 99, 235, 0.24);
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

    /* ---- Motion ---------------------------------------------------------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur: 220ms;
    --dur-slow: 520ms;

    --header-h: 72px;
    --z-header: 100;
    --z-menu: 110;
}

@media (max-width: 720px) {
    :root {
        --header-h: 64px;
    }
}

/* Honour the OS reduced-motion preference everywhere, including scroll reveals. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}