/**
 * ==============================================================================
 * BrandNewHomes.in - Central Design System Tokens
 * File: styles/design-tokens.css
 * ==============================================================================
 * Core architectural tokens for BrandNewHomes.in marketplace.
 * Unifies brand colors, typography, 4/8px spacing, elevation, radii, and breakpoints.
 */

:root {
  /* ============================================================================
     1. BRAND COLOR PALETTE
     ============================================================================ */
  /* Primary Royal Blue & Navy Tokens */
  --bnh-primary: #0A2540;
  --bnh-primary-blue: #0052D4;
  --bnh-primary-hover: #0041a8;
  --bnh-primary-active: #003385;
  --bnh-primary-light: #1E70F5;

  /* Secondary Royal Blue */
  --bnh-secondary: #0052D4;
  --bnh-secondary-hover: #0041a8;
  --bnh-secondary-active: #003385;
  --bnh-secondary-subtle: #EFF6FF;
  --bnh-secondary-border: rgba(0, 82, 212, 0.2);

  /* Sunlit Kerala Modern Palette Tokens (Phase 21.1 & Phase 2 Royal Blue + Amber) */
  --bg-canvas: #F8FAFC;
  --bg-canvas-gradient: radial-gradient(120% 60% at 50% 0%, #EFF6FF 0%, #F8FAFC 100%);
  --bg-surface: #FFFFFF;
  --bnh-royal-navy: #0F2942;
  --bnh-royal-blue: #1E40AF;
  --bnh-amber-warm: #F59E0B;
  --bnh-amber-deep: #D97706;
  --bnh-emerald-verified: #10B981;
  --border-surface: 1px solid #E2E8F0;
  --radius-surface: 16px;
  --shadow-surface-hover: 0 20px 25px -5px rgba(37, 99, 235, 0.10), 0 8px 10px -6px rgba(37, 99, 235, 0.05);

  --gradient-brand-hero: linear-gradient(135deg, #1E40AF 0%, #2563EB 55%, #0EA5E9 100%);
  --gradient-cta-primary: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
  --shadow-cta-primary: 0 8px 20px -4px rgba(245, 158, 11, 0.45);
  --color-cta-primary: #FFFFFF;

  --gradient-trust-emerald: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --bg-trust-emerald: #ECFDF5;
  --color-trust-emerald: #047857;

  /* Royal Blue Gradient & OLX Discovery Tokens */
  --bnh-navy: #0A2540;
  --bnh-blue: #1463FF;
  --bnh-blue-bright: #2878FF;
  --bnh-cyan: #42C6FF;
  --bnh-ice: #EEF6FF;
  --bnh-surface-bg: #FFFFFF;
  --bnh-gradient: linear-gradient(135deg, #0052D4 0%, #1463FF 50%, #42C6FF 100%);
  --bnh-gradient-subtle: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  --bnh-gradient-hero: linear-gradient(135deg, #1E40AF 0%, #2563EB 55%, #0EA5E9 100%);

  /* Accent Amber / Gold */
  --bnh-accent: #E5A93C;
  --bnh-accent-hover: #d1952a;
  --bnh-accent-light: #FEF3C7;
  --bnh-accent-dark: #92400E;

  /* Semantic Feedback */
  --bnh-success: #10B981;
  --bnh-success-hover: #059669;
  --bnh-success-light: #ECFDF5;
  --bnh-success-border: #A7F3D0;
  --bnh-success-text: #065F46;

  --bnh-warning: #F59E0B;
  --bnh-warning-light: #FFFBEB;
  --bnh-warning-text: #92400E;

  --bnh-danger: #EF4444;
  --bnh-danger-light: #FEF2F2;
  --bnh-danger-text: #991B1B;

  /* Neutral Backgrounds & Surfaces */
  --bnh-white: #FFFFFF;
  --bnh-surface: #F8FAFC;
  --bnh-surface-secondary: #F1F5F9;
  --bnh-surface-tertiary: #E2E8F0;
  --bnh-surface-dark: #0F172A;
  --bnh-surface-darker: #0B1120;

  /* Typography Colors */
  --bnh-text-primary: #0A2540;
  --bnh-text-secondary: #475569;
  --bnh-text-muted: #64748B;
  --bnh-text-subtle: #94A3B8;
  --bnh-text-inverse: #FFFFFF;
  --bnh-text-inverse-muted: rgba(255, 255, 255, 0.75);

  /* Borders & Dividers */
  --bnh-border-subtle: #E2E8F0;
  --bnh-border-default: #CBD5E1;
  --bnh-border-strong: #94A3B8;
  --bnh-border-focus: #0052D4;

  /* ============================================================================
     2. TYPOGRAPHY SYSTEM
     ============================================================================ */
  --bnh-font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bnh-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type Scale */
  --bnh-text-display-xl: clamp(2.25rem, 4vw, 3.25rem); /* 36px - 52px */
  --bnh-text-display-lg: clamp(1.875rem, 3vw, 2.5rem);  /* 30px - 40px */
  --bnh-text-h1: clamp(1.625rem, 2.5vw, 2.125rem);      /* 26px - 34px */
  --bnh-text-h2: clamp(1.375rem, 2vw, 1.75rem);         /* 22px - 28px */
  --bnh-text-h3: clamp(1.125rem, 1.5vw, 1.375rem);      /* 18px - 22px */
  --bnh-text-body-lg: 1.125rem;                         /* 18px */
  --bnh-text-body: 1rem;                                /* 16px */
  --bnh-text-body-sm: 0.875rem;                         /* 14px */
  --bnh-text-caption: 0.75rem;                          /* 12px */
  --bnh-text-micro: 0.6875rem;                          /* 11px */

  /* Line Heights */
  --bnh-leading-tight: 1.15;
  --bnh-leading-snug: 1.3;
  --bnh-leading-normal: 1.5;
  --bnh-leading-relaxed: 1.65;

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

  /* ============================================================================
     3. SPACING SYSTEM (4px / 8px Base Scale)
     ============================================================================ */
  --bnh-space-0: 0;
  --bnh-space-1: 0.25rem;  /* 4px */
  --bnh-space-2: 0.5rem;   /* 8px */
  --bnh-space-3: 0.75rem;  /* 12px */
  --bnh-space-4: 1rem;     /* 16px */
  --bnh-space-5: 1.25rem;  /* 20px */
  --bnh-space-6: 1.5rem;   /* 24px */
  --bnh-space-8: 2rem;     /* 32px */
  --bnh-space-10: 2.5rem;  /* 40px */
  --bnh-space-12: 3rem;    /* 48px */
  --bnh-space-16: 4rem;    /* 64px */
  --bnh-space-20: 5rem;    /* 80px */

  /* ============================================================================
     4. BORDER RADII
     ============================================================================ */
  --bnh-radius-xs: 4px;
  --bnh-radius-sm: 8px;
  --bnh-radius-md: 12px;
  --bnh-radius-lg: 16px;
  --bnh-radius-xl: 24px;
  --bnh-radius-2xl: 32px;
  --bnh-radius-pill: 9999px;

  /* ============================================================================
     5. ELEVATION & SHADOWS
     ============================================================================ */
  --bnh-shadow-subtle: 0 1px 3px rgba(10, 37, 64, 0.05), 0 1px 2px rgba(10, 37, 64, 0.03);
  --bnh-shadow-card: 0 4px 16px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.04);
  --bnh-shadow-card-hover: 0 20px 25px -5px rgba(37, 99, 235, 0.10), 0 8px 10px -6px rgba(37, 99, 235, 0.05);
  --bnh-shadow-floating: 0 16px 36px rgba(10, 37, 64, 0.16), 0 4px 12px rgba(10, 37, 64, 0.08);
  --bnh-shadow-dock: 0 -4px 20px rgba(10, 37, 64, 0.08);
  --bnh-shadow-glow: 0 0 0 3px rgba(0, 82, 212, 0.25);

  /* ============================================================================
     6. LAYOUT & GRID
     ============================================================================ */
  --bnh-container-max: 1240px;
  --bnh-container-wide: 1400px;
  --bnh-gutter: clamp(1rem, 4vw, 2.5rem);

  /* Touch Targets */
  --bnh-touch-min: 44px;

  /* ============================================================================
     7. TRANSITIONS & TIMING
     ============================================================================ */
  --bnh-duration-fast: 150ms;
  --bnh-duration-normal: 240ms;
  --bnh-duration-slow: 350ms;
  --bnh-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --bnh-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   8. ACCESSIBILITY & FOCUS STYLES (WCAG 2.1 AA)
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--bnh-secondary) !important;
  outline-offset: 2px !important;
}

@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;
  }
}