/* ============================================================
   STRAY INSIGHT FOUNDATION — DESIGN TOKENS
   v1.0 | Ara, India · Est. 2022
   Rescue · Heal · Protect
   ============================================================
   This file is the single source of truth for the SIF website
   and any downstream digital product. Import this at the top
   of your main stylesheet, then build everything else on top.
   ============================================================ */

/* --- Google Fonts ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,900&family=Poppins:wght@300;400;500;600;700&display=swap');


:root {
  /* ==========================================================
     1. CORE BRAND COLORS
     ========================================================== */
  --sif-forest:         #2C5F2E;  /* Primary — buttons, headlines on cream */
  --sif-forest-deep:    #1E3D0F;  /* Dark mode surface, logo ink */
  --sif-rose:           #C94070;  /* Accent — CTAs, italic word "Insight" */
  --sif-rose-warm:      #E8607A;  /* Hover state, highlights */
  --sif-cream:          #FAF6F0;  /* Default page surface */
  --sif-ink:            #1E2820;  /* Body text on cream */

  /* ==========================================================
     2. EXTENDED PALETTE (derived — use sparingly)
     ========================================================== */
  --sif-forest-50:      #E8F0E8;  /* Tinted card surface */
  --sif-forest-100:     #C8DBC9;  /* Subtle dividers, chips */
  --sif-forest-300:     #6A9668;  /* Muted green text */
  --sif-forest-700:     #204420;  /* Hover on primary */

  --sif-rose-50:        #FBEAF0;  /* Rose-tinted surface */
  --sif-rose-100:       #F4C4D5;  /* Soft rose chip */
  --sif-rose-700:       #A02E58;  /* Rose button hover */

  --sif-cream-warm:     #F2ECDF;  /* Alt surface for zebra sections */
  --sif-cream-shadow:   #E8E0CF;  /* Subtle section divider */

  --sif-ink-muted:      #5A6359;  /* Secondary body text */
  --sif-ink-soft:       #8A8F86;  /* Captions, metadata */

  /* Semantic (use these, not the raw colors, for states) */
  --sif-success:        #2C5F2E;  /* = forest */
  --sif-warning:        #C6851E;  /* Amber — for donation urgency */
  --sif-danger:         #A63232;  /* Reserved — rescue-critical only */
  --sif-info:           #1E3D0F;  /* = forest-deep */

  /* ==========================================================
     3. TYPOGRAPHY
     ========================================================== */
  --font-display:       'Playfair Display', 'Georgia', serif;
  --font-body:          'Poppins', -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — modular, 1.25 ratio, base 16px */
  --fs-xs:              0.75rem;   /* 12px — captions, pill badges */
  --fs-sm:              0.875rem;  /* 14px — metadata, UI labels */
  --fs-base:            1rem;      /* 16px — body copy */
  --fs-lg:              1.125rem;  /* 18px — lede paragraphs */
  --fs-xl:              1.5rem;    /* 24px — card headings */
  --fs-2xl:             2rem;      /* 32px — section headings */
  --fs-3xl:             2.75rem;   /* 44px — page headings */
  --fs-4xl:             3.75rem;   /* 60px — hero headlines (desktop) */
  --fs-5xl:             5rem;      /* 80px — reserved for hero impact */

  /* Weights */
  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-black:           900;  /* Playfair Display only */

  /* Line heights */
  --lh-tight:           1.1;   /* Display headlines */
  --lh-snug:            1.25;  /* Section headings */
  --lh-normal:          1.5;   /* UI */
  --lh-relaxed:         1.7;   /* Long-form body copy */

  /* Letter spacing */
  --ls-tight:           -0.02em;  /* Large display */
  --ls-normal:          0;
  --ls-wide:            0.05em;   /* Eyebrows, small caps */
  --ls-wider:           0.15em;   /* Pill badges, labels */

  /* ==========================================================
     4. SPACING SCALE (8pt grid)
     ========================================================== */
  --space-1:            0.25rem;   /* 4px */
  --space-2:            0.5rem;    /* 8px */
  --space-3:            0.75rem;   /* 12px */
  --space-4:            1rem;      /* 16px */
  --space-5:            1.5rem;    /* 24px */
  --space-6:            2rem;      /* 32px */
  --space-7:            3rem;      /* 48px */
  --space-8:            4rem;      /* 64px */
  --space-9:            6rem;      /* 96px */
  --space-10:           8rem;      /* 128px */

  /* ==========================================================
     5. LAYOUT
     ========================================================== */
  --container-sm:       640px;
  --container-md:       768px;
  --container-lg:       1024px;
  --container-xl:       1200px;    /* default max content width */
  --container-2xl:      1440px;    /* wide marketing pages */

  /* ==========================================================
     6. RADII
     ========================================================== */
  --radius-none:        0;
  --radius-sm:          4px;
  --radius-md:          8px;       /* buttons, inputs */
  --radius-lg:          16px;      /* cards */
  --radius-xl:          24px;      /* hero blocks */
  --radius-pill:        999px;     /* pill badges, CTA buttons */
  --radius-circle:      50%;

  /* ==========================================================
     7. BORDERS
     ========================================================== */
  --border-hair:        1px solid var(--sif-cream-shadow);
  --border-divider:     1px solid var(--sif-forest-100);
  --border-strong:      2px solid var(--sif-forest);
  --border-accent:      2px solid var(--sif-rose);

  /* ==========================================================
     8. SHADOWS — restrained, editorial
     ========================================================== */
  --shadow-sm:          0 1px 2px rgba(30, 40, 32, 0.06);
  --shadow-md:          0 4px 12px rgba(30, 40, 32, 0.08);
  --shadow-lg:          0 12px 32px rgba(30, 40, 32, 0.12);
  --shadow-focus:       0 0 0 3px rgba(201, 64, 112, 0.35);

  /* ==========================================================
     9. MOTION
     ========================================================== */
  --ease-out:           cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:           150ms;
  --dur-base:           250ms;
  --dur-slow:           450ms;

  /* ==========================================================
     10. Z-INDEX SCALE
     ========================================================== */
  --z-base:             0;
  --z-raised:           10;
  --z-sticky:           50;
  --z-overlay:          100;
  --z-modal:            200;
  --z-toast:            300;
}


/* ============================================================
   BASE RESETS — apply once globally
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--sif-ink);
  background-color: var(--sif-cream);
}

/* Display headlines default to Playfair Black */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--sif-forest-deep);
  margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl)); }
h2 { font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }

/* Sub-headings in body font (Poppins) */
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--sif-forest-deep);
  margin: 0 0 var(--space-3);
}

h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wider); }

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--sif-rose);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--sif-rose-700);
}


/* ============================================================
   SIGNATURE TYPOGRAPHIC LOCKUP
   Use .sif-wordmark anywhere you write "Stray Insight Foundation"
   to get the italic "Insight" treatment automatically.
   ============================================================ */
.sif-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--sif-forest-deep);
}
.sif-wordmark em,
.sif-wordmark .insight {
  font-style: italic;
  font-weight: var(--fw-black);
  color: var(--sif-rose);
}


/* ============================================================
   UTILITY CLASSES — the minimum set. Extend as needed.
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--sif-rose);
  margin-bottom: var(--space-3);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background: var(--sif-forest);
  color: var(--sif-cream);
}

.pill--rose    { background: var(--sif-rose);      color: var(--sif-cream); }
.pill--cream   { background: var(--sif-cream);     color: var(--sif-forest-deep); }
.pill--outline { background: transparent; color: var(--sif-forest-deep); border: 1px solid var(--sif-forest); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}

.btn--primary {
  background: var(--sif-forest);
  color: var(--sif-cream);
}
.btn--primary:hover {
  background: var(--sif-forest-deep);
  color: var(--sif-cream);
  transform: translateY(-1px);
}

.btn--donate {
  background: var(--sif-rose);
  color: var(--sif-cream);
}
.btn--donate:hover {
  background: var(--sif-rose-700);
  color: var(--sif-cream);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--sif-forest-deep);
  border-color: var(--sif-forest-deep);
}
.btn--ghost:hover {
  background: var(--sif-forest-deep);
  color: var(--sif-cream);
}


/* ============================================================
   END OF TOKENS
   ============================================================ */