/**
 * HindHomes Central Design Token System
 * Single Source of Truth for Design & Engineering
 * Version 1.0 (PDF Design System Audit Standard)
 */

:root {
    /* 1. Typography Tokens */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Size Scale Tokens */
    --fz-h1: 3.5rem;      /* 56px */
    --fz-h2: 2.5rem;      /* 40px */
    --fz-h3: 2.0rem;      /* 32px */
    --fz-h4: 1.5rem;      /* 24px */
    --fz-h5: 1.25rem;     /* 20px */
    --fz-body: 1.0rem;    /* 16px */
    --fz-small: 0.875rem; /* 14px */
    --fz-caption: 0.75rem;/* 12px */

    /* 2. Color Tokens */
    --color-primary-brand: #142339;  /* Primary: Brand Blue (Deep Navy) */
    --color-primary-blue:  #0066FF;  /* Primary: Action Blue */
    --color-primary-dark:  #0052CC;  /* Primary: Hover Blue */

    --color-secondary-gold:#F59E0B;  /* Secondary: Gold Accent */
    --color-secondary-light:#FEF3C7; /* Soft Gold Tint */

    --color-success-green: #10B981;  /* Success: Green */
    --color-success-light: #D1FAE5;  /* Soft Green Tint */

    --color-warning-orange:#F97316;  /* Warning: Orange */
    --color-warning-light: #FFEDD5;  /* Soft Orange Tint */

    --color-error-red:     #EF4444;  /* Error: Red */
    --color-error-light:   #FEE2E2;  /* Soft Red Tint */

    /* Neutral Gray Scale Tokens */
    --color-slate-950:     #090D16;
    --color-slate-900:     #0F172A;
    --color-slate-800:     #1E293B;
    --color-slate-700:     #334155;
    --color-slate-600:     #475569;
    --color-slate-500:     #64748B;
    --color-slate-400:     #94A3B8;
    --color-slate-300:     #CBD5E1;
    --color-slate-200:     #E2E8F0;
    --color-slate-100:     #F1F5F9;
    --color-slate-50:      #F8FAFC;

    /* Background Tokens */
    --color-bg-white:      #FFFFFF;
    --color-bg-canvas:     #F8FAFC;

    /* 3. Border Radius Tokens */
    --radius-sm: 6px;   /* 0.375rem — Badges, Pills, Tooltips */
    --radius-md: 10px;  /* 0.625rem — Buttons, Inputs, Form Controls */
    --radius-lg: 16px;  /* 1.0rem   — Property Cards, Panels, Banners */
    --radius-xl: 24px;  /* 1.5rem   — Hero Containers, Modals, Overlays */

    /* 4. Spacing Tokens (8px Grid System) */
    --space-3xs: 4px;   /* 0.25rem  */
    --space-2xs: 8px;   /* 0.5rem   */
    --space-xs:  12px;  /* 0.75rem  */
    --space-sm:  16px;  /* 1.0rem   */
    --space-md:  24px;  /* 1.5rem   */
    --space-lg:  32px;  /* 2.0rem   */
    --space-xl:  48px;  /* 3.0rem   */
    --space-2xl: 64px;  /* 4.0rem   */

    /* 5. Soft Elevation Shadow Tokens */
    --shadow-level-1: 0 2px 8px -1px rgba(15, 23, 42, 0.04), 0 1px 4px -1px rgba(15, 23, 42, 0.02);
    --shadow-level-2: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --shadow-level-3: 0 20px 40px -12px rgba(15, 23, 42, 0.16), 0 10px 20px -6px rgba(15, 23, 42, 0.08);

    /* 6. Motion & Transition Tokens (200-300ms) */
    --transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base:   250ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);

    /* 7. Icon Size Tokens */
    --icon-sm: 18px;
    --icon-md: 24px;  /* Default Icon Size */
    --icon-lg: 32px;

    /* 8. Component Dimension Tokens */
    --button-height: 44px;      /* 2.75rem */
    --input-height:  44px;      /* 2.75rem */
    --container-max-width: 1200px;
    --grid-gutter: 24px;
    --outer-padding: 16px;
}