/**
 * TinkuRani.com — Design System CSS Variables
 * Color Palette, Typography, Spacing, Borders, Shadows, and Transitions
 */

:root {
    /* Core Dark Theme Color Palette */
    --bg-main: #080B14;
    --bg-secondary: #101625;
    --bg-card: #151C2E;
    --bg-card-hover: #1A233A;
    --bg-glass: rgba(21, 28, 46, 0.72);
    --bg-header-scroll: rgba(8, 11, 20, 0.86);

    /* Brand Accent Colors */
    --accent-primary: #6366F1;
    --accent-secondary: #8B5CF6;
    --accent-highlight: #06B6D4;

    /* Semantic Status Colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-whatsapp: #25D366;

    /* Text Colors */
    --text-main: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    /* Borders & Dividers */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(99, 102, 241, 0.42);
    --border-highlight: rgba(6, 182, 212, 0.45);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    --gradient-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #06B6D4 100%);
    --gradient-text: linear-gradient(135deg, #F8FAFC 0%, #A5B4FC 50%, #67E8F9 100%);
    --gradient-card-glow: radial-gradient(circle at top right, rgba(99, 102, 241, 0.14), transparent 65%);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Layout & Spacing */
    --container-max: 1240px;
    --container-narrow: 880px;
    --header-height: 80px;
    --section-py: 6rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, 0.58);
    --shadow-glow: 0 8px 28px -4px rgba(99, 102, 241, 0.38);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ======================================================================
   PREMIUM LIGHT MODE THEME VARIABLES (HIGH CONTRAST & CRISP VISIBILITY)
   ====================================================================== */
html[data-theme="light"] {
    --bg-main: #F1F5F9;
    --bg-secondary: #E2E8F0;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F8FAFC;
    --bg-glass: rgba(255, 255, 255, 0.92);
    --bg-header-scroll: rgba(255, 255, 255, 0.94);

    --text-main: #0F172A;
    --text-secondary: #334155;
    --text-muted: #475569;

    --border-subtle: rgba(15, 23, 42, 0.14);
    --border-hover: rgba(79, 70, 229, 0.55);
    --border-highlight: rgba(8, 145, 178, 0.55);

    --gradient-card-glow: radial-gradient(circle at top right, rgba(99, 102, 241, 0.07), transparent 65%);

    --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 10px 28px -4px rgba(15, 23, 42, 0.11);
    --shadow-lg: 0 18px 42px -8px rgba(15, 23, 42, 0.15);
    --shadow-glow: 0 8px 24px -4px rgba(79, 70, 229, 0.35);
}