/* =============================================================================
   VIDUR FOUNDATION INDIA — DESIGN SYSTEM v4.0
   Palette: Charcoal · Warm Gold · Apple White
   Feel: Clean, confident, purposeful. Apple-level precision.
   ============================================================================= */

:root {
  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.75rem;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;
  --leading-loose:   1.85;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Color Palette ──────────────────────────────────────────────────────── */

  /* Navy — kept for backward compat */
  --color-navy-50:  #EEF2F8;
  --color-navy-100: #D5DFF0;
  --color-navy-200: #ABBFE1;
  --color-navy-300: #7A9ACE;
  --color-navy-400: #4E76B8;
  --color-navy-500: #2A5298;
  --color-navy-600: #1A3D7C;
  --color-navy-700: #0F2B5E;
  --color-navy-800: #1D1D1F;
  --color-navy-900: #060F1C;

  /* Warm Gold — accent (used sparingly) */
  --color-gold-50:  #FBF5E6;
  --color-gold-100: #F5E6C2;
  --color-gold-200: #ECD08A;
  --color-gold-300: #DFB84A;
  --color-gold-400: #C9922A;
  --color-gold-500: #A8731A;
  --color-gold-600: #875510;
  --color-gold-700: #643D08;
  --color-gold-800: #422604;
  --color-gold-900: #221202;

  /* Apple Grays — surfaces, borders, text */
  --color-warm-50:  #FFFFFF;
  --color-warm-100: #F5F5F7;
  --color-warm-200: #E8E8EA;
  --color-warm-300: #D2D2D7;
  --color-warm-400: #86868B;
  --color-warm-500: #6E6E73;
  --color-warm-600: #515154;
  --color-warm-700: #3D3D3F;
  --color-warm-800: #2D2D2F;
  --color-warm-900: #1D1D1F;

  /* Pillar accent colors */
  --color-education:   #1A4FAE;
  --color-health:      #B91C1C;
  --color-agriculture: #15803D;
  --color-finance:     #6D28D9;
  --color-technology:  #0D7A6F;

  /* Semantic status */
  --color-success: #15803D;
  --color-warning: #A8731A;
  --color-error:   #B91C1C;
  --color-info:    #1A4FAE;

  /* ── Semantic Aliases ───────────────────────────────────────────────────── */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #FFFFFF;
  --bg-accent:    #F5F5F7;
  --bg-dark:      #1D1D1F;

  --text-primary:    #1D1D1F;
  --text-secondary:  #6E6E73;
  --text-muted:      #6E6E73;
  --text-inverse:    #F5F5F7;
  --text-link:       #1D1D1F;
  --text-link-hover: #C9922A;

  --border-light:   #D2D2D7;
  --border-medium:  #D2D2D7;
  --border-dark:    #86868B;

  --brand-primary: #1D1D1F;
  --brand-accent:  #C9922A;
  --brand-gold:    #C9922A;

  /* Backward-compat aliases */
  --color-saffron-50:  var(--color-gold-50);
  --color-saffron-100: var(--color-gold-100);
  --color-saffron-200: var(--color-gold-200);
  --color-saffron-300: var(--color-gold-300);
  --color-saffron-400: var(--color-gold-400);
  --color-saffron-500: var(--color-gold-500);
  --color-saffron-600: var(--color-gold-600);
  --color-saffron-700: var(--color-gold-700);
  --color-saffron-800: var(--color-gold-800);
  --color-saffron-900: var(--color-gold-900);

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --max-width-content: 720px;
  --max-width-wide:    1100px;
  --max-width-full:    1400px;

  /* ── Radius (max 8px) ───────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   8px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  /* ── Shadows (minimal, purposeful) ─────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 6px 20px rgba(0, 0, 0, 0.10);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index ────────────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}