@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     GLOBAL BRAND COLOURS (Single Source of Truth)
     ========================================================================== */
  --color-primary: #7423C1;
  --color-primary-light: #F4F2FC;
  --color-accent: #F25346;
  --color-accent-light: #F9F4F2;
  --color-text: #280933;
  --color-bg-light: #FFFFFF;
  --color-bg-muted: #F7F7F7;

  /* Semantic Overlay & Opacity Tokens */
  --color-text-muted: rgba(40, 9, 51, 0.65);
  --color-text-light: rgba(40, 9, 51, 0.45);
  --border-color: rgba(40, 9, 51, 0.08);
  --border-hover: rgba(40, 9, 51, 0.16);

  /* ==========================================================================
     TYPOGRAPHY SYSTEM
     ========================================================================== */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Navigation font size tokens */
  --nav-size-desktop: 16px;
  --nav-size-tablet: 15px;
  --nav-size-mobile: 15px;

  /* ==========================================================================
     GLOBAL DESIGN TOKENS
     ========================================================================== */

  /* Border Radii Tokens */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* Component Radii Aliases */
  --radius-card: var(--radius-lg);
  --radius-btn: var(--radius-pill);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-pill);

  /* Spacing Scale (8px Grid) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Shadow Tokens */
  --shadow-soft: 0 10px 35px -10px rgba(40, 9, 51, 0.05), 0 1px 3px rgba(40, 9, 51, 0.02);
  --shadow-medium: 0 16px 45px -12px rgba(40, 9, 51, 0.08), 0 2px 6px rgba(40, 9, 51, 0.03);
  --shadow-large: 0 24px 60px -15px rgba(40, 9, 51, 0.12), 0 4px 12px rgba(40, 9, 51, 0.04);
  --shadow-hover: var(--shadow-medium);

  /* Motion & Transition System */
  --ease-out-calm: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-calm: cubic-bezier(0.76, 0, 0.24, 1);

  --transition-hover: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-buttons: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-cards: 300ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fade: 300ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-nav: 350ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-drawer: 400ms cubic-bezier(0.25, 1, 0.5, 1);

  /* Legacy timing aliases for backwards compatibility */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Iconography Tokens (Lucide Icons System) */
  --icon-size-desktop: 24px;
  --icon-size-tablet: 22px;
  --icon-size-mobile: 20px;
  --icon-stroke: 1.75px;
  --icon-spacing: 16px;

  /* Container & Layout Constraints */
  --container-width: 1280px;
  --container-width-narrow: 800px;
  --container-padding-desktop: 32px;
  --container-padding-mobile: 20px;

  /* Floating Capsule Navbar Clearance Tokens */
  --navbar-offset-desktop: 112px;
  --navbar-offset-tablet: 96px;
  --navbar-offset-mobile: 84px;

  /* Touch Targets & Accessibility Constraints */
  --touch-target-min: 48px;
  --header-height-mobile: 68px;
  --header-height-desktop: 84px;

  /* Reading Constraints */
  --max-reading-width: 60ch;
  --reading-line-height: 1.65;

  /* Z-Index Stacking Order */
  --z-page: 1;
  --z-sticky-cta: 80;
  --z-whatsapp: 90;
  --z-nav: 100;
  --z-drawer: 100;
  --z-modal: 1000;

  /* Safe Area Insets — iOS Dynamic Island, Notch, Gesture Bar */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}