/* ==========================================================================
   DESIGN TOKENS — Pranacharya Green Shield
   All design decisions centralized here for consistency.
   ========================================================================== */

:root {
  /* ── Colors ────────────────────────────────────────────────────────────── */

  /* Primary — Deep Forest Green (trust, Ayurveda, nature) */
  --color-primary-900: #0D3B13;
  --color-primary-800: #145A1E;
  --color-primary-700: #1B5E20;
  --color-primary-600: #237A2B;
  --color-primary-500: #2E7D32;
  --color-primary-400: #43A047;
  --color-primary-300: #66BB6A;
  --color-primary-200: #A5D6A7;
  --color-primary-100: #C8E6C9;
  --color-primary-50:  #E8F5E9;

  /* Accent — Vibrant Green (CTAs, highlights) */
  --color-accent: #4CAF50;
  --color-accent-hover: #43A047;
  --color-accent-active: #388E3C;
  --color-accent-light: #81C784;

  /* Gold — Warm Premium Accent */
  --color-gold-700: #9A7B2D;
  --color-gold-600: #B8942F;
  --color-gold-500: #C8A951;
  --color-gold-400: #D4BC72;
  --color-gold-300: #E0CF93;
  --color-gold-200: #EDE2B6;
  --color-gold-100: #F7F0D8;

  /* Neutrals */
  --color-neutral-950: #0A0A0A;
  --color-neutral-900: #1A1A1A;
  --color-neutral-800: #2D2D2D;
  --color-neutral-700: #404040;
  --color-neutral-600: #525252;
  --color-neutral-500: #6B6B6B;
  --color-neutral-400: #8A8A8A;
  --color-neutral-300: #B0B0B0;
  --color-neutral-200: #D4D4D4;
  --color-neutral-100: #EBEBEB;
  --color-neutral-50:  #F5F5F5;

  /* Backgrounds */
  --color-bg-primary:   #FAFAF5;
  --color-bg-secondary: #F0EDE4;
  --color-bg-card:      #FFFFFF;
  --color-bg-dark:      #1A1A1A;
  --color-bg-dark-alt:  #242424;
  --color-bg-overlay:   rgba(0, 0, 0, 0.55);

  /* Semantic */
  --color-success:  #2E7D32;
  --color-warning:  #F9A825;
  --color-error:    #D32F2F;
  --color-info:     #1976D2;

  /* Derived / Shorthand */
  --color-text:       var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-text-light: var(--color-neutral-400);
  --color-text-on-dark: #FFFFFF;
  --color-text-on-primary: #FFFFFF;
  --color-border:     var(--color-neutral-200);
  --color-border-light: var(--color-neutral-100);

  /* ── Typography ────────────────────────────────────────────────────────── */

  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Lato', sans-serif;

  /* Font sizes — mobile-first (rem) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing ───────────────────────────────────────────────────────────── */

  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ────────────────────────────────────────────────────────────── */

  --container-max:    1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --container-padding: var(--space-4);

  /* Grid gaps */
  --grid-gap-sm: var(--space-3);
  --grid-gap-md: var(--space-5);
  --grid-gap-lg: var(--space-8);

  /* Header & nav heights */
  --header-height:        64px;
  --announcement-height:  36px;
  --bottom-nav-height:    60px;

  /* ── Border Radius ─────────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl:  0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Transitions ───────────────────────────────────────────────────────── */

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base:  all var(--duration-normal) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out);
  --transition-color: color var(--duration-fast) var(--ease-out),
                      background-color var(--duration-fast) var(--ease-out),
                      border-color var(--duration-fast) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);

  /* ── Z-index Scale ─────────────────────────────────────────────────────── */

  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-toast:      600;
  --z-bottom-nav: 350;
}

/* ── Desktop overrides ─────────────────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
    --header-height: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
    --header-height: 80px;
  }
}