/* ============================================================
   DESIGN TOKENS — Nirvrithi Charitable Trust
   Central source of truth for all design values.
   ============================================================ */

/* Google Fonts — Lora (display) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {

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

  /* Backgrounds */
  --clr-bg:               #FAF9F7;   /* Warm ivory — primary page background */
  --clr-surface:          #FFFFFF;   /* Pure white — cards and surfaces */
  --clr-surface-soft:     #F3F0FA;   /* Very light lavender — alternate sections */
  --clr-surface-sage:     #EDF4F0;   /* Soft sage tint — tertiary sections */

  /* Brand — Primary (Muted Lavender) */
  --clr-primary:          #7C6EA5;
  --clr-primary-dark:     #5E5182;
  --clr-primary-hover:    #6B5D93;
  --clr-primary-light:    #EDE9F7;
  --clr-primary-xlight:   #F7F5FC;

  /* Brand — Secondary (Sage Green) */
  --clr-secondary:        #6A8E7F;
  --clr-secondary-dark:   #4E6E60;
  --clr-secondary-light:  #E8F2ED;

  /* Status — Available */
  --clr-available:        #4E8B6A;
  --clr-available-bg:     #EAF4EF;
  --clr-available-border: #B7DEC9;

  /* Status — Unavailable */
  --clr-unavailable:      #B05050;
  --clr-unavailable-bg:   #F9EDED;
  --clr-unavailable-border: #E8BCBC;

  /* Text */
  --clr-text:             #2C2C3A;   /* Charcoal — primary text */
  --clr-text-muted:       #6B6B7E;   /* Medium gray — secondary text */
  --clr-text-light:       #9595A0;   /* Light gray — metadata, labels */
  --clr-text-inverse:     #FFFFFF;   /* White text for dark bg */

  /* Borders */
  --clr-border:           #E8E4F0;   /* Soft lavender border */
  --clr-border-soft:      #F0EDF9;   /* Very soft border */
  --clr-border-sage:      #D4E6DD;   /* Sage-tinted border */

  /* ── Shadows ──────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(44, 44, 58, 0.05);
  --shadow-sm:   0 2px 8px rgba(44, 44, 58, 0.07);
  --shadow-md:   0 4px 16px rgba(44, 44, 58, 0.09);
  --shadow-lg:   0 8px 32px rgba(44, 44, 58, 0.11);
  --shadow-xl:   0 16px 48px rgba(44, 44, 58, 0.13);
  --shadow-primary: 0 6px 24px rgba(124, 110, 165, 0.25);
  --shadow-secondary: 0 6px 24px rgba(106, 142, 127, 0.25);

  /* ── Typography ───────────────────────────────── */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Font Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Type Scale (fluid-friendly) */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.25rem;    /* 20px */
  --text-2xl:     1.5rem;     /* 24px */
  --text-3xl:     1.875rem;   /* 30px */
  --text-4xl:     2.25rem;    /* 36px */
  --text-5xl:     3rem;       /* 48px */
  --text-6xl:     3.75rem;    /* 60px */
  --text-7xl:     4.5rem;     /* 72px */

  /* Line Heights */
  --lh-tight:     1.2;
  --lh-snug:      1.375;
  --lh-normal:    1.6;
  --lh-relaxed:   1.75;

  /* Letter Spacing */
  --ls-tight:     -0.025em;
  --ls-normal:    0;
  --ls-wide:      0.025em;
  --ls-wider:     0.05em;
  --ls-widest:    0.1em;

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

  /* ── Border Radius ────────────────────────────── */
  --radius-xs:    0.25rem;
  --radius-sm:    0.375rem;
  --radius-md:    0.625rem;
  --radius-lg:    1rem;
  --radius-xl:    1.5rem;
  --radius-2xl:   2rem;
  --radius-full:  9999px;

  /* ── Layout ───────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 2rem);
  --nav-height:     72px;
  --section-pad-y:  clamp(3.5rem, 8vw, 5.5rem);

  /* ── Transitions ──────────────────────────────── */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   150ms var(--ease-out);
  --transition-base:   250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);
  --transition-slower: 600ms var(--ease-out);

  /* ── Z-Index Scale ────────────────────────────── */
  --z-below:      -1;
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  line-height: var(--lh-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--clr-text);
}

p {
  line-height: var(--lh-relaxed);
  color: var(--clr-text-muted);
}

a {
  color: var(--clr-primary);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--clr-primary-dark);
}

/* ── Utility Classes ──────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad-y);
}

.section--soft {
  background-color: var(--clr-surface-soft);
}

.section--sage {
  background-color: var(--clr-surface-sage);
}

.section--white {
  background-color: var(--clr-surface);
}

/* Scroll-animation classes */
.anim-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.anim-fade-in {
  opacity: 0;
  transition: opacity var(--transition-slower);
}
.anim-fade-in.is-visible {
  opacity: 1;
}

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}