/* ==========================================================================
   CSS Custom Properties - Konceptwise Design System
   ========================================================================== */

:root {
    /* Brand Colors */
    --color-primary: #6B9BD2;
    --color-primary-dark: #4A7AB5;
    --color-primary-light: #8FB5E0;
    --color-primary-lighter: #B8D4F0;
    --color-primary-rgb: 107, 155, 210;

    /* Navy */
    --color-navy: #1B2A4A;
    --color-navy-light: #2C3E5A;
    --color-navy-rgb: 27, 42, 74;

    /* Accent */
    --color-accent: #38BDF8;
    --color-accent-dark: #0EA5E9;
    --color-accent-rgb: 56, 189, 248;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-off-white: #F7F9FC;
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F0F4F8;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* Semantic */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-error: #EF4444;

    /* Product Brand Colors (from actual logos) */
    --color-authyo: #2B3990;
    --color-authyo-accent: #1EA34E;
    --color-jalpi: #1E2152;
    --color-jalpi-accent: #C41E2A;
    --color-emailidea: #E8675A;
    --color-emailidea-accent: #3D4F6F;
    --color-smsidea: #4C1D95;
    --color-smsidea-accent: #C41E2A;

    /* Typography */
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --fs-display: clamp(2.5rem, 5vw, 4rem);
    --fs-h1: clamp(2rem, 4vw, 3rem);
    --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
    --fs-h4: clamp(1.1rem, 1.5vw, 1.25rem);
    --fs-body: 1rem;
    --fs-body-lg: 1.125rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-normal: 1.7;
    --lh-relaxed: 1.8;

    /* Spacing */
    --section-py: clamp(4rem, 8vw, 8rem);
    --section-py-sm: clamp(3rem, 5vw, 5rem);
    --container-max: 1300px;
    --container-wide: 1400px;
    --container-narrow: 800px;
    --container-px: 1.5rem;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Effects */
    --shadow-xs: 0 1px 2px rgba(27, 42, 74, 0.05);
    --shadow-sm: 0 1px 3px rgba(27, 42, 74, 0.08), 0 1px 2px rgba(27, 42, 74, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(27, 42, 74, 0.08), 0 2px 4px -2px rgba(27, 42, 74, 0.06);
    --shadow-lg: 0 10px 25px -3px rgba(27, 42, 74, 0.1), 0 4px 10px -4px rgba(27, 42, 74, 0.06);
    --shadow-xl: 0 20px 50px -5px rgba(27, 42, 74, 0.12), 0 8px 20px -6px rgba(27, 42, 74, 0.06);
    --shadow-glow: 0 0 30px rgba(var(--color-primary-rgb), 0.3);
    --shadow-glow-accent: 0 0 30px rgba(var(--color-accent-rgb), 0.3);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-overlay: 400;
    --z-modal: 500;

    /* ===== Semantic Theme Tokens (Light Mode = default) ===== */
    --theme-bg: #FFFFFF;
    --theme-bg-alt: #F7F9FC;
    --theme-bg-card: #FFFFFF;
    --theme-bg-elevated: #FFFFFF;
    --theme-border: #E2E8F0;
    --theme-border-light: #F0F4F8;
    --theme-text: #334155;
    --theme-text-heading: #1B2A4A;
    --theme-text-muted: #64748B;
    --theme-text-faint: #94A3B8;
    --theme-header-bg: rgba(255, 255, 255, 0.97);
    --theme-header-border: rgba(0, 0, 0, 0.05);
    --theme-card-shadow: 0 1px 3px rgba(27, 42, 74, 0.08);
    --theme-card-hover-shadow: 0 10px 25px -3px rgba(27, 42, 74, 0.1);
    --theme-icon-bg: rgba(107, 155, 210, 0.1);
    --theme-section-gray: #F7F9FC;
    --theme-footer-bg: #1B2A4A;
    --theme-input-bg: #FFFFFF;
    --theme-input-border: #E2E8F0;
    --theme-mode-toggle-bg: rgba(0, 0, 0, 0.06);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
    --theme-bg: #0B0F1A;
    --theme-bg-alt: #111827;
    --theme-bg-card: #151C2C;
    --theme-bg-elevated: #1A2235;
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-text: #CBD5E1;
    --theme-text-heading: #F1F5F9;
    --theme-text-muted: #94A3B8;
    --theme-text-faint: #64748B;
    --theme-header-bg: rgba(11, 15, 26, 0.95);
    --theme-header-border: rgba(255, 255, 255, 0.06);
    --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --theme-card-hover-shadow: 0 10px 30px -3px rgba(0, 0, 0, 0.5);
    --theme-icon-bg: rgba(107, 155, 210, 0.15);
    --theme-section-gray: #111827;
    --theme-footer-bg: #080C15;
    --theme-input-bg: #151C2C;
    --theme-input-border: rgba(255, 255, 255, 0.1);
    --theme-mode-toggle-bg: rgba(255, 255, 255, 0.08);

    /* Override shadows for dark (navy-based shadows are invisible on dark bg) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 50px -5px rgba(0, 0, 0, 0.5), 0 8px 20px -6px rgba(0, 0, 0, 0.3);

    /* Override some base colors for dark */
    --color-white: #0B0F1A;
    --color-off-white: #111827;
    --color-gray-50: #151C2C;
    --color-gray-100: rgba(255, 255, 255, 0.05);
    --color-gray-200: rgba(255, 255, 255, 0.08);
    --color-gray-500: #94A3B8;
    --color-gray-600: #CBD5E1;
    --color-gray-700: #E2E8F0;
}