/**
 * Vyavastha Design Tokens & Core Variables
 * Design Language: Indian Heritage SaaS (Ivory, Crimson Red, Saffron Accent, Gold Highlight, Dark Brown Text)
 * Handcrafted for app.vyavastha.com
 */

@import url('fonts.css');

:root {
    /* ========================================================
       1. COLOR SYSTEM (AA Contrast Compliant Everywhere)
       ======================================================== */

    /* Canvas & Surface Backgrounds (Warm Ivory & Cream Paper) */
    --vy-bg: #FAF6EF;
    --vy-bg-canvas: #FAF6EF;
    --vy-bg-subtle: #F4EDE0;
    --vy-bg-sunken: #EFE6D6;
    --vy-surface: #FFFFFF;
    --vy-surface-card: #FDFBF7;
    --vy-surface-raised: #FFFFFF;

    /* Primary: Deep Crimson / Terracotta Red */
    --vy-primary: #8B1D1D;
    --vy-primary-hover: #741616;
    --vy-primary-active: #5E1010;
    --vy-primary-dark: #6D1414;
    --vy-primary-light: #FBF1EF;
    --vy-primary-tint: #FDF4F2;
    --vy-primary-border: #F3CECA;
    --vy-primary-text: #FFFFFF;

    /* Accent: Saffron / Warm Orange */
    --vy-accent: #E86326;
    --vy-accent-hover: #D45218;
    --vy-accent-active: #BD4310;
    --vy-accent-dark: #A83A0C;
    --vy-accent-light: #FEF4ED;
    --vy-accent-tint: #FFF7F2;
    --vy-accent-border: #FBDAC6;
    --vy-accent-text: #FFFFFF;

    /* Highlight: Antique Gold / Ochre */
    --vy-gold: #C88A2C;
    --vy-gold-hover: #B57920;
    --vy-gold-light: #FDF7EB;
    --vy-gold-tint: #FFFBF3;
    --vy-gold-border: #F4E2C2;
    --vy-gold-text: #784E0B;

    /* Text & Typography (Dark Warm Browns instead of harsh cold black) */
    --vy-text: #2C1E18;
    --vy-text-main: #2C1E18;
    --vy-text-secondary: #5C4A42;
    --vy-text-muted: #857268;
    --vy-text-light: #AFA098;
    --vy-text-inverse: #FFFFFF;
    --vy-text-cream: #FDFBF7;

    /* Borders & Dividers (Warmed toward beige/sand) */
    --vy-border: #E8DFC8;
    --vy-border-subtle: #F2ECDC;
    --vy-border-strong: #D5C9AD;
    --vy-divider: #E8DFC8;

    /* Semantics (Tuned to the warm palette) */
    --vy-success: #15803D;
    --vy-success-bg: #F0FDF4;
    --vy-success-border: #BBF7D0;
    --vy-success-text: #166534;

    --vy-warning: #B45309;
    --vy-warning-bg: #FFFBEB;
    --vy-warning-border: #FDE68A;
    --vy-warning-text: #92400E;

    --vy-danger: #991B1B;
    --vy-danger-bg: #FEF2F2;
    --vy-danger-border: #FECACA;
    --vy-danger-text: #7F1D1D;

    --vy-info: #4338CA;
    --vy-info-bg: #EEF2FF;
    --vy-info-border: #C7D2FE;
    --vy-info-text: #3730A3;

    /* ========================================================
       2. TYPOGRAPHY SYSTEM
       ======================================================== */
    --vy-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --vy-font-sans: 'Mukta', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vy-font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;

    /* Font Sizes */
    --vy-text-xs: 0.75rem;     /* 12px */
    --vy-text-sm: 0.8125rem;   /* 13px */
    --vy-text-base: 0.875rem;  /* 14px */
    --vy-text-md: 1rem;        /* 16px */
    --vy-text-lg: 1.125rem;    /* 18px */
    --vy-text-xl: 1.25rem;     /* 20px */
    --vy-text-2xl: 1.5rem;     /* 24px */
    --vy-text-3xl: 1.875rem;   /* 30px */
    --vy-text-4xl: 2.25rem;    /* 36px */

    /* ========================================================
       3. ELEVATION & SHADOWS (Warm terracotta-tinted shadows)
       ======================================================== */
    --vy-shadow-xs: 0 1px 2px rgba(44, 30, 24, 0.04);
    --vy-shadow-sm: 0 2px 5px rgba(44, 30, 24, 0.05), 0 1px 2px rgba(44, 30, 24, 0.03);
    --vy-shadow-md: 0 4px 12px rgba(44, 30, 24, 0.08), 0 2px 4px rgba(44, 30, 24, 0.03);
    --vy-shadow-lg: 0 12px 28px -4px rgba(44, 30, 24, 0.12), 0 4px 10px -2px rgba(44, 30, 24, 0.05);
    --vy-shadow-xl: 0 20px 35px -6px rgba(44, 30, 24, 0.16);
    --vy-shadow-card: 0 2px 8px rgba(44, 30, 24, 0.04), 0 1px 2px rgba(44, 30, 24, 0.03);

    /* ========================================================
       4. RADII & GEOMETRY
       ======================================================== */
    --vy-radius-xs: 4px;
    --vy-radius-sm: 8px;
    --vy-radius-md: 12px;
    --vy-radius-lg: 16px;
    --vy-radius-xl: 22px;
    --vy-radius-full: 9999px;

    /* ========================================================
       5. SPACING SYSTEM
       ======================================================== */
    --vy-space-1: 0.25rem;  /* 4px */
    --vy-space-2: 0.5rem;   /* 8px */
    --vy-space-3: 0.75rem;  /* 12px */
    --vy-space-4: 1rem;     /* 16px */
    --vy-space-5: 1.25rem;  /* 20px */
    --vy-space-6: 1.5rem;   /* 24px */
    --vy-space-8: 2rem;     /* 32px */
    --vy-space-10: 2.5rem;  /* 40px */
    --vy-space-12: 3rem;    /* 48px */

    /* ========================================================
       6. TRANSITIONS & MOTION
       ======================================================== */
    --vy-transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
    --vy-transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --vy-transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Safe Area insets for mobile iOS / Android notch */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ========================================================
       7. BACKWARD COMPATIBILITY BRIDGES (Aliasing to --nk-*)
       ======================================================== */
    --nk-primary: var(--vy-primary);
    --nk-primary-hover: var(--vy-primary-hover);
    --nk-primary-active: var(--vy-primary-active);
    --nk-primary-tint: var(--vy-primary-light);
    --nk-primary-border: var(--vy-primary-border);
    --nk-accent: var(--vy-accent);

    --nk-bg: var(--vy-bg);
    --nk-surface: var(--vy-surface);
    --nk-surface-raised: var(--vy-surface-raised);
    --nk-border: var(--vy-border);
    --nk-border-subtle: var(--vy-border-subtle);
    --nk-text-main: var(--vy-text);
    --nk-text-muted: var(--vy-text-secondary);
    --nk-text-light: var(--vy-text-muted);

    --nk-success: var(--vy-success);
    --nk-success-tint: var(--vy-success-bg);
    --nk-success-border: var(--vy-success-border);
    --nk-success-text: var(--vy-success-text);

    --nk-warning: var(--vy-warning);
    --nk-warning-tint: var(--vy-warning-bg);
    --nk-warning-border: var(--vy-warning-border);
    --nk-warning-text: var(--vy-warning-text);

    --nk-danger: var(--vy-danger);
    --nk-danger-tint: var(--vy-danger-bg);
    --nk-danger-border: var(--vy-danger-border);
    --nk-danger-text: var(--vy-danger-text);

    --nk-info: var(--vy-info);
    --nk-info-tint: var(--vy-info-bg);
    --nk-info-border: var(--vy-info-border);
    --nk-info-text: var(--vy-info-text);

    --nk-font-sans: var(--vy-font-sans);
    --nk-font-serif: var(--vy-font-serif);
    --nk-font-mono: var(--vy-font-mono);

    --nk-radius-sm: var(--vy-radius-sm);
    --nk-radius-md: var(--vy-radius-md);
    --nk-radius-lg: var(--vy-radius-lg);
    --nk-radius-xl: var(--vy-radius-xl);
    --nk-radius-full: var(--vy-radius-full);

    --nk-shadow-xs: var(--vy-shadow-xs);
    --nk-shadow-sm: var(--vy-shadow-sm);
    --nk-shadow-md: var(--vy-shadow-md);
    --nk-shadow-lg: var(--vy-shadow-lg);
    --nk-shadow-card: var(--vy-shadow-card);
}

/* Base Body Application */
body {
    background-color: var(--vy-bg);
    color: var(--vy-text);
    font-family: var(--vy-font-sans);
    font-size: var(--vy-text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Serif Headings & KPI Numerals */
h1, h2, h3, .vy-heading, .nk-brand-title {
    font-family: var(--vy-font-serif);
    font-weight: 700;
    color: var(--vy-text);
    letter-spacing: -0.015em;
}

.vy-display-serif, .kpi-number, .stat-value, .nk-kpi-value {
    font-family: var(--vy-font-serif);
    font-feature-settings: "tnum" 1, "cv01" 1;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.tabular-nums, .vy-currency, .amount-val {
    font-variant-numeric: tabular-nums;
}

/* Reduced Motion Preference Respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}