@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* =========================================
     FindiBANKIT Brand Design Tokens
     Based on Official Brand Guidelines PDF
     ========================================= */

    /* -----------------------------------------
     BRAND COLORS (Exact from guidelines)
     ----------------------------------------- */

    /* Primary Blue - #0BABE4 (Main brand cyan) */
    --brand-primary: #0BABE4;

    /* Dark Blue - #1C3C5F (Trust, reliability) */
    --brand-dark: #1C3C5F;

    /* Red - #D43F33 (Action, alerts) */
    --brand-red: #D43F33;

    /* White - #FEFEFE (Clean backgrounds) */
    --brand-white: #FEFEFE;

    /* -----------------------------------------
     Primary: Brand Primary Blue
     Base: #0BABE4
     ----------------------------------------- */
    --color-primary-50: #E7F6FC;
    --color-primary-100: #C4E9F8;
    --color-primary-200: #9DDCF4;
    --color-primary-300: #6DCAED;
    --color-primary-400: #3FBCE8;
    --color-primary-500: #0BABE4;
    /* BRAND BASE */
    --color-primary-600: #0998CC;
    --color-primary-700: #0780AB;
    --color-primary-800: #05668A;
    --color-primary-900: #034B66;

    /* -----------------------------------------
     Secondary: Brand Dark Blue
     Base: #1C3C5F
     ----------------------------------------- */
    --color-secondary-50: #E6EBF0;
    --color-secondary-100: #C2CED9;
    --color-secondary-200: #9AAFC1;
    --color-secondary-300: #728FA8;
    --color-secondary-400: #537896;
    --color-secondary-500: #345F83;
    --color-secondary-600: #1C3C5F;
    /* BRAND BASE */
    --color-secondary-700: #162F4B;
    --color-secondary-800: #102338;
    --color-secondary-900: #0A1624;

    /* -----------------------------------------
     Accent: Brand Red
     Base: #D43F33
     ----------------------------------------- */
    --color-accent-50: #FBEAE9;
    --color-accent-100: #F5CBC7;
    --color-accent-200: #EDA9A2;
    --color-accent-300: #E4867C;
    --color-accent-400: #DD6B5D;
    --color-accent-500: #D43F33;
    /* BRAND BASE */
    --color-accent-600: #BE3529;
    --color-accent-700: #9E2A21;
    --color-accent-800: #7E2019;
    --color-accent-900: #5E160F;

    /* -----------------------------------------
     Neutrals: Based on Brand White #FEFEFE
     ----------------------------------------- */
    --color-neutral-0: #FEFEFE;
    /* BRAND WHITE */
    --color-neutral-50: #F8F9FA;
    --color-neutral-100: #F1F3F5;
    --color-neutral-200: #E9ECEF;
    --color-neutral-300: #DEE2E6;
    --color-neutral-400: #ADB5BD;
    --color-neutral-500: #6C757D;
    --color-neutral-600: #495057;
    --color-neutral-700: #343A40;
    --color-neutral-800: #212529;
    --color-neutral-900: #0D1117;

    /* -----------------------------------------
     Status Colors (Using brand palette)
     ----------------------------------------- */
    --color-success: #10B981;
    --color-success-bg: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-error: var(--brand-red);
    /* Use brand red */
    --color-error-bg: #FBEAE9;
    --color-info: var(--brand-primary);
    /* Use brand primary blue */
    --color-info-bg: #E7F6FC;

    /* -----------------------------------------
     Service Colors (Badges/Verticals)
     ----------------------------------------- */
    --color-banking-bg: #f3e8ff;
    --color-banking-text: #6b21a8;
    --color-travel-bg: #e0f2fe;
    --color-travel-text: #0284c7;
    --color-insurance-bg: #dcfce7;
    --color-insurance-text: #166534;

    /* -----------------------------------------
     Glassmorphism Overlays
     ----------------------------------------- */

    /* Light Mode Glass */
    --glass-light-bg: rgba(254, 254, 254, 0.7);
    --glass-light-border: rgba(254, 254, 254, 0.5);
    --glass-light-shadow: rgba(28, 60, 95, 0.15);

    /* Dark Mode Glass */
    --glass-dark-bg: rgba(28, 60, 95, 0.85);
    --glass-dark-border: rgba(254, 254, 254, 0.1);
    --glass-dark-shadow: rgba(0, 0, 0, 0.4);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--brand-dark), var(--color-secondary-800));
    --gradient-brand: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(11, 171, 228, 0.14), transparent 70%);

    /* -----------------------------------------
     Shadows - Soft & Professional
     ----------------------------------------- */
    --shadow-sm: 0 2px 4px rgba(28, 60, 95, 0.06);
    --shadow-md: 0 10px 20px rgba(28, 60, 95, 0.08);
    --shadow-lg: 0 20px 40px rgba(28, 60, 95, 0.12);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.05);

    /* -----------------------------------------
     Radius Tokens
     ----------------------------------------- */
    --radius-btn: 14px;
    --radius-card: 20px;
    --radius-input: 10px;
    --radius-modal: 20px;

    /* -----------------------------------------
     Spacing Tokens (4px Grid)
     ----------------------------------------- */
    --space-0: 0px;
    --space-0_5: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* -----------------------------------------
     Premium Rhythm Tokens
     ----------------------------------------- */
    --container-max-width: 1200px;
    --content-max-width: 1120px;
    --section-padding-y: 96px;
    --section-padding-y-mobile: 56px;
    --card-gap: 24px;
    --gap-heading-subtitle: 12px;
    --gap-subtitle-content: 32px;
    --header-height: 72px;

    /* -----------------------------------------
     Motion Tokens (Phase 10.3)
     ----------------------------------------- */
    --ease-out-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-normal: 400ms;

    /* -----------------------------------------
     Typography System
     Headings: Plus Jakarta Sans (Premium, Geometric)
     Body: Inter (Clean, Legible)
     ----------------------------------------- */
    --font-family-heading: 'Plus Jakarta Sans', sans-serif;
    --font-family-body: 'Inter', sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes & Line Heights */
    /* Display / H1 - 60px */
    --text-h1: 3.75rem;
    --leading-h1: 1.1;

    /* H2 - 40px */
    --text-h2: 2.5rem;
    --leading-h2: 1.2;

    /* H3 - 28px */
    --text-h3: 1.75rem;
    --leading-h3: 1.3;

    /* Body Base - 18px */
    --text-base: 1.125rem;
    --leading-base: 1.6;

    /* Small / Caption - 14px */
    --text-sm: 0.875rem;
    --leading-sm: 1.5;

    /* -----------------------------------------
     Theme Variables (Semantic Layer)
     ----------------------------------------- */
}

/* --- LIGHT THEME (Default - Clean & Modern) --- */
:root,
[data-theme="light"] {
    /* Backgrounds - Clean Whites */
    --bg-body: var(--brand-white);
    --bg-surface: #F8F9FA;
    --bg-surface-alt: #F1F3F5;
    --bg-surface-glass: rgba(254, 254, 254, 0.95);

    /* Hero Gradient - Premium Dark with Subtle Glows */
    --bg-hero: radial-gradient(circle at 20% 30%, rgba(11, 171, 228, 0.14) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(212, 63, 51, 0.06) 0%, transparent 40%),
        var(--brand-dark);
    --bg-hero-alt: radial-gradient(circle at 80% 30%, rgba(11, 171, 228, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 20% 70%, rgba(212, 63, 51, 0.05) 0%, transparent 40%),
        var(--brand-dark);

    /* Text - High Contrast */
    --text-primary: var(--color-secondary-800);
    --text-secondary: var(--color-neutral-600);
    --text-muted: var(--color-neutral-500);
    --text-inverse: var(--brand-white);

    /* Borders - Subtle & Clean */
    --border-subtle: var(--color-neutral-200);
    --border-default: var(--color-neutral-300);
    --border-highlight: var(--brand-primary);

    /* Shadows - Soft & Professional */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 2px 4px rgba(28, 60, 95, 0.06);
    --shadow-card: 0 10px 30px rgba(28, 60, 95, 0.08);
    --shadow-md: 0 15px 35px rgba(28, 60, 95, 0.1);
    --shadow-lg: 0 25px 50px rgba(28, 60, 95, 0.12);
    --shadow-btn-raised: 0 4px 12px rgba(11, 171, 228, 0.12);
    --shadow-btn-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.05);
}

/* --- DARK THEME --- */
[data-theme="dark"] {
    --bg-body: var(--color-secondary-900);
    --bg-surface: var(--color-secondary-800);
    --bg-surface-glass: var(--glass-dark-bg);

    --text-primary: var(--color-neutral-50);
    --text-secondary: var(--color-neutral-400);
    --text-inverse: var(--brand-dark);

    --border-subtle: rgba(254, 254, 254, 0.1);
    --border-highlight: var(--brand-primary);

    /* Shadows - Neumorphic / Glow */
    --shadow-card: 12px 12px 24px #060C14, -12px -12px 24px #1C3C5F;
    --shadow-btn-raised: 6px 6px 12px #060C14, -6px -6px 12px #1C3C5F;
    --shadow-btn-pressed: inset 6px 6px 12px #060C14, inset -6px -6px 12px #1C3C5F;
    --shadow-glass: 8px 8px 24px 0 rgba(0, 0, 0, 0.4);
}

/* =========================================
   Global Typography Reset & Styles
   ========================================= */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    background-color: var(--bg-body);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
.font-heading {
    font-family: var(--font-family-heading);
    color: var(--text-primary);
    margin-bottom: 0.75em;
}

/* Typography Utilities */
.text-h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
}

.text-h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.text-h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    font-weight: var(--font-weight-semibold);
}

.text-base {
    font-size: var(--text-base);
    line-height: var(--leading-base);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-bold);
}

/* Theming Utilities */
.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-btn {
    box-shadow: var(--shadow-btn-raised);
}

/* Text Color Utilities */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-inverse {
    color: var(--text-inverse);
}

/* Brand Color Utilities */
.text-brand-primary {
    color: var(--brand-primary);
}

.text-brand-dark {
    color: var(--brand-dark);
}

.text-brand-red {
    color: var(--brand-red);
}

.bg-brand-primary {
    background-color: var(--brand-primary);
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}

.bg-brand-red {
    background-color: var(--brand-red);
}

.bg-brand-white {
    background-color: var(--brand-white);
}