/* ============================================
   TICKETYATRI — DESIGN SYSTEM VARIABLES
   Single source of truth for the entire app.
   ============================================ */

:root {

    /* ─── TYPOGRAPHY SYSTEM ─────────────────────── */

    /* Font Family — Outfit everywhere */
    --font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display-font: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Weights */
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* Font Sizes — desktop baseline */
    --text-2xs:  0.625rem;
    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.875rem;
    --text-md:   0.9375rem;
    --text-lg:   1rem;
    --text-xl:   1.125rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.75rem;
    --text-4xl:  2rem;
    --text-hero: clamp(2rem, 4.5vw, 3.5rem);

    /* Line Heights */
    --leading-none:    1;
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;
    --leading-loose:   1.8;

    /* Letter Spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.08em;

    /* ─── BRAND COLORS ──────────────────────────── */

    --navy: #14213D;
    --navy-dark: #0f182b;
    --navy-light: #1f335c;
    --blue: #E91E63;
    --blue-hover: #C2185B;
    --blue-light: #f06292;
    --blue-50: #FFF1F5;
    --teal: #14B8A6;
    --teal-dark: #0d9488;
    --teal-light: #2dd4bf;
    --teal-50: #f0fdfa;
    --cyan: #06b6d4;
    --orange: #f97316;
    --orange-light: #fb923c;

    /* Aliases used in components.css / dashboard.css */
    --primary-blue: #E91E63;
    --primary-blue-hover: #C2185B;
    --primary-dark: #14213D;
    --teal-green: #14B8A6;
    --white: #FFFFFF;
    --info: #2196F3;
    --info-light: #e3f2fd;

    /* ─── TEXT COLORS ───────────────────────────── */

    --text: #14213D;
    --text-primary: #14213D;
    --text-secondary: #667085;
    --text-muted: #9ca3af;
    --muted: #667085;
    --text-white: #FFFFFF;

    /* ─── BORDERS ───────────────────────────────── */

    --border: #E9EAF0;
    --border-color: #E9EAF0;
    --border-light: #f3f4f6;

    /* ─── BACKGROUNDS ──────────────────────────── */

    --page-bg: #FFFFFF;
    --bg: #FFF8FA;
    --section-soft: #FFF1F5;
    --section-warm: #FFF7F9;
    --section-cool: #FFF8FA;
    --hero-bg-1: #FFF7F9;
    --hero-bg-2: #FFF1F5;
    --hero-bg-3: #FFF8FA;
    --services-bg: #FFFFFF;
    --steps-bg-1: #FFF7F9;
    --steps-bg-2: #FFF1F5;
    --why-bg: #FFF8FA;
    --b2b-bg-1: #FFF7F9;
    --b2b-bg-2: #FFF1F5;

    /* ─── SEMANTIC COLORS ──────────────────────── */

    --success: #16A34A;
    --success-light: #DCFCE7;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --danger: #DC2626;
    --danger-light: #fee2e2;
    --purple: #9333EA;
    --purple-light: #f3e8ff;

    /* ─── GRADIENTS ─────────────────────────────── */

    --gradient-hero: linear-gradient(135deg, #FFF1F5 0%, #FFF7F9 30%, #f0fdf4 70%, #FEF3C7 100%);
    --gradient-cta: linear-gradient(135deg, #C2185B 0%, #E91E63 50%, #f06292 100%);
    --gradient-footer: linear-gradient(135deg, #14213D 0%, #0f182b 50%, #050810 100%);
    --gradient-card-blue: linear-gradient(135deg, #FFF1F5, #FFF7F9);
    --gradient-card-teal: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    --gradient-card-orange: linear-gradient(135deg, #fff7ed, #ffedd5);
    --gradient-card-purple: linear-gradient(135deg, #faf5ff, #f3e8ff);
    --gradient-steps: linear-gradient(135deg, var(--steps-bg-1), var(--steps-bg-2));
    --gradient-b2b: linear-gradient(135deg, var(--b2b-bg-1), var(--b2b-bg-2));

    /* ─── SHADOWS ───────────────────────────────── */

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-default: 0 4px 18px rgba(20,33,61,0.06);
    --shadow-hover: 0 12px 30px rgba(20,33,61,0.10);
    --shadow-card: 0 0 0 1px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-card-hover: 0 0 0 1px rgba(233,30,99,0.1), 0 8px 25px rgba(0,0,0,0.1);
    --shadow-b2b: 0 12px 35px rgba(20,33,61,0.07);

    /* ─── LAYOUT ────────────────────────────────── */

    --max-width: 1280px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --radius-input: 10px;
    --radius-btn: 10px;
    --radius-card-sm: 14px;
    --radius-card: 18px;
    --radius-card-lg: 20px;
    --radius-section: 18px;

    /* ─── TRANSITIONS ───────────────────────────── */

    --transition-fast: 150ms ease;
    --transition: 250ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── V2 TOKENS ───────────────────────────── */
    --v2-primary-blue: #E91E63;
    --v2-primary-blue-dark: #C2185B;
    --v2-primary-blue-light: #FFF1F5;
    --v2-trust-bg: #14213D;
    
    --v2-text-dark: #14213D;
    --v2-text-gray: #667085;
    --v2-text-light: #9ca3af;

    --v2-green: #16A34A;
    --v2-teal: #14B8A6;
    --v2-orange: #F59E0B;
    --v2-red: #DC2626;

    --v2-bg-light: #FFF8FA;
    --v2-border: #E9EAF0;
    
    --v2-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --v2-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* TicketYatri brand: shared with the dummy-ticket booking module. */
:root {
    --brand-primary: #E91E63;
    --brand-hover: #C2185B;
    --brand-magenta: #9333EA;
    --brand-soft: #FFF1F5;
    --brand-border: #E9EAF0;
    --brand-gradient: linear-gradient(110deg, #E91E63, #C2185B);
    --blue: var(--brand-primary);
    --blue-hover: var(--brand-hover);
    --blue-light: #f06292;
    --blue-50: var(--brand-soft);
    --primary-blue: var(--brand-primary);
    --primary-blue-hover: var(--brand-hover);
    --v2-primary-blue: var(--brand-primary);
    --v2-primary-blue-dark: var(--brand-hover);
    --v2-primary-blue-light: var(--brand-soft);
    --gradient-cta: var(--brand-gradient);
    --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #FFF1F5 65%, #FFF7F9 100%);
}