/* ============================================================
   DESIGN TOKENS — ग्रामपंचायत पोर्टल
   GP Vadghar · UI Redesign Prototype
   ============================================================ */

:root {
  /* === PRIMARY: Forest Green === */
  --gp-green-900: #0d2e1a;
  --gp-green-800: #1a5c38;
  --gp-green-700: #1e6b42;
  --gp-green-600: #237a4b;
  --gp-green-500: #2d9e62;
  --gp-green-400: #4cb87d;
  --gp-green-200: #a8dfc2;
  --gp-green-100: #e8f5ee;
  --gp-green-50:  #f0f9f3;

  /* === SECONDARY: Teal === */
  --gp-teal-800: #084a4e;
  --gp-teal-700: #0a5a5e;
  --gp-teal-600: #0d7377;
  --gp-teal-500: #10898e;
  --gp-teal-100: #dff2f3;

  /* === ACCENT: Warm Saffron === */
  --gp-saffron-700: #a36600;
  --gp-saffron-600: #c47b00;
  --gp-saffron-500: #e8a020;
  --gp-saffron-400: #f0b840;
  --gp-saffron-200: #fad98c;
  --gp-saffron-100: #fff3d4;
  --gp-saffron-50:  #fffbef;

  /* === NEUTRAL === */
  --gp-neutral-900: #1c2b22;
  --gp-neutral-800: #2d3f34;
  --gp-neutral-700: #3d5247;
  --gp-neutral-600: #506659;
  --gp-neutral-500: #6b8577;
  --gp-neutral-400: #8fa89a;
  --gp-neutral-300: #c2d3cb;
  --gp-neutral-200: #dde8e3;
  --gp-neutral-100: #f0f4f2;
  --gp-neutral-50:  #f8faf9;
  --gp-white:       #ffffff;

  /* === SEMANTIC === */
  --gp-success: #2d9e62;
  --gp-warning: #e8a020;
  --gp-error:   #c0392b;
  --gp-info:    #0d7377;

  /* === TYPOGRAPHY === */
  --font-primary: 'Noto Sans', 'Noto Sans Devanagari', Arial, sans-serif;

  --text-5xl:  clamp(2rem, 5vw, 2.75rem);
  --text-4xl:  clamp(1.75rem, 4vw, 2.25rem);
  --text-3xl:  clamp(1.5rem, 3.5vw, 1.875rem);
  --text-2xl:  clamp(1.25rem, 3vw, 1.5rem);
  --text-xl:   1.25rem;
  --text-lg:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;
  --lh-loose:  1.8;

  /* === 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;

  /* === BORDERS === */
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full:9999px;

  --border-color: var(--gp-neutral-200);

  /* === SHADOWS === */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08), 0 6px 20px rgba(0,0,0,0.07);
  --shadow-lg:  0 4px 12px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.09);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.12), 0 20px 48px rgba(0,0,0,0.10);

  /* === TRANSITIONS === */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* === LAYOUT === */
  --container-max: 1280px;
  --header-height: 80px;
  --section-padding-y: clamp(3rem, 6vw, 5rem);

  /* === Z-INDEX === */
  --z-header:  100;
  --z-modal:   200;
  --z-overlay: 150;
  --z-tooltip: 250;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}