/* =============================================================================
   VAANI DESIGN TOKENS
   Single source of truth for all visual design decisions.

   TABLE OF CONTENTS
   1. Brand Colours
   2. Surface & Background Colours
   3. Text Colours
   4. Border & Accent
   5. Always-Dark Surface (philosophy section)
   6. Typography
   7. Easing Curves
   8. Border Radii
   9. Shadows
   10. Component Dimensions (phone mockup)
   11. Dark Mode Overrides
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. BRAND COLOURS
   The primary brand colour is a deep red (Vaani crimson).
   --------------------------------------------------------------------------- */
:root {
  --color-primary:      #76261d;   /* main CTA, highlights              */
  --color-primary-light: #9a2a2a;  /* hover states                      */
  --color-primary-dark: #600000;   /* pressed / dark variant            */
  --color-primary-rgb:  118, 38, 29; /* for rgba() usage                */


/* ---------------------------------------------------------------------------
   2. SURFACE & BACKGROUND COLOURS
   --------------------------------------------------------------------------- */
  --color-bg:           #faf5f3;
  --color-bg-light:     #faf5f3;
  --color-bg-dark:      #111111;
  --color-bg-card:      #ffffff;
  --color-bg-muted:     #f3eeec;
  --color-bg-nav:        rgba(250, 245, 243, 0.80);
  --color-bg-nav-scrolled: rgba(250, 245, 243, 0.96);


/* ---------------------------------------------------------------------------
   3. TEXT COLOURS
   --------------------------------------------------------------------------- */
  --color-text:          #1a1a1a;
  --color-text-primary:  #1a1a1a;
  --color-text-secondary: #5a5a5a;
  --color-text-muted:    #999;
  --color-text-inverse:  #ffffff;


/* ---------------------------------------------------------------------------
   4. BORDER & ACCENT
   --------------------------------------------------------------------------- */
  --color-border:  rgba(0, 0, 0, 0.08);
  --color-accent:  #c9a86c;   /* gold accent — used sparingly          */


/* ---------------------------------------------------------------------------
   5. ALWAYS-DARK SURFACE
   Used in the philosophy section which stays dark regardless of colour scheme.
   --------------------------------------------------------------------------- */
  --color-surface-always-dark:    #111111;
  --color-on-surface-always-dark: #f5f5f5;
  --color-primary-always-dark:    #c4574e;  /* lighter red on dark bg   */


/* ---------------------------------------------------------------------------
   6. TYPOGRAPHY
   Brand font  → display headings (Playfair Display — editorial serif)
   Body font   → body text, UI, buttons (Manrope — geometric sans)
   --------------------------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


/* ---------------------------------------------------------------------------
   7. EASING CURVES
   --------------------------------------------------------------------------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);


/* ---------------------------------------------------------------------------
   8. BORDER RADII
   --------------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;


/* ---------------------------------------------------------------------------
   9. SHADOWS
   --------------------------------------------------------------------------- */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,.06);
  --shadow-md:   0 4px 24px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.10);
  --shadow-xl:   0 16px 64px rgba(0,0,0,.14);
  --shadow-glow: 0 0 60px rgba(var(--color-primary-rgb), .25);


/* ---------------------------------------------------------------------------
   10. COMPONENT DIMENSIONS
   Phone mockup used in hero and showcase sections.
   --------------------------------------------------------------------------- */
  --phone-width:  280px;
  --phone-radius: 40px;
  --phone-bezel:  10px;
}


/* ---------------------------------------------------------------------------
   11. DARK MODE OVERRIDES
   Applied automatically via OS preference (prefers-color-scheme) and
   manually via the JS toggle which adds html.dark-mode.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              #0e0e0e;
    --color-bg-card:         #1a1a1a;
    --color-bg-muted:        #1f1f1f;
    --color-bg-nav:           rgba(14, 14, 14, 0.80);
    --color-bg-nav-scrolled:  rgba(14, 14, 14, 0.96);
    --color-text:            #f0f0f0;
    --color-text-secondary:  #a0a0a0;
    --color-text-muted:      #666;
    --color-border:          rgba(255, 255, 255, .08);
    --color-primary-light:   #c4574e;
    --shadow-sm:  0 2px 8px  rgba(0,0,0,.30);
    --shadow-md:  0 4px 24px rgba(0,0,0,.40);
    --shadow-lg:  0 8px 40px rgba(0,0,0,.50);
    --shadow-xl:  0 16px 64px rgba(0,0,0,.60);
  }
}

html.dark-mode {
  --color-bg:              #0e0e0e;
  --color-bg-card:         #1a1a1a;
  --color-bg-muted:        #1f1f1f;
  --color-bg-nav:           rgba(14, 14, 14, 0.80);
  --color-bg-nav-scrolled:  rgba(14, 14, 14, 0.96);
  --color-text:            #f0f0f0;
  --color-text-secondary:  #a0a0a0;
  --color-text-muted:      #666;
  --color-border:          rgba(255, 255, 255, .08);
  --color-primary-light:   #c4574e;
  --shadow-sm:  0 2px 8px  rgba(0,0,0,.30);
  --shadow-md:  0 4px 24px rgba(0,0,0,.40);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.50);
  --shadow-xl:  0 16px 64px rgba(0,0,0,.60);
}