/* ===========================================================================
   SHER — design tokens
   Source of truth: sher_brand_book_complete (v2, 2026-04-17).
   Touch this file only for palette / type / motion changes.
   =========================================================================== */

:root {
  /* --- Navy family (Ashoka blue → aged midnight) --- */
  --midnight:  #0D1F2D;
  --dusk:      #1E3448;
  --slate:     #2E4A60;
  --fog:       #7A9AB5;

  /* --- Saffron family (kesari → ember) --- */
  --ember:     #C4621A;   /* CTA. One per screen. Scarcity is the point. */
  --tallow:    #D4894A;
  --ochre:     #E8B87A;
  --glow:      #F0CFA0;

  /* --- Turmeric family (haldi → pale gold) --- */
  --mustard:   #B5860A;
  --turmeric:  #C8940A;   /* Milestone numbers, motion values, notification warmth. NEVER on buttons. */
  --pale-gold: #E8C96A;

  /* --- White family (shweta → linen) --- */
  --linen:     #EDE6DA;
  --parchment: #F4EFE5;
  --chalk:     #FAF7F2;

  /* --- India Green family (chakra green → forest) --- */
  --forest:    #1A4A2E;
  --fern:      #2D7A4A;   /* Founding member badge, tricolour stripe. */
  --sage:      #8AB89A;
  --mint:      #D4EAD8;

  /* --- Neutrals --- */
  --ink:       #14100C;
  --bark:      #4A3328;
  --muted:     #7A6858;
  --rule:      #DDD5C4;

  /* --- Semantic aliases --- */
  --bg-page:     var(--parchment);
  --bg-surface:  var(--chalk);
  --bg-dark:     var(--midnight);
  --bg-dark-2:   var(--dusk);
  --bg-muted:    var(--linen);
  --text-ink:    var(--ink);
  --text-bark:   var(--bark);
  --text-muted:  var(--muted);
  --text-onDark: var(--linen);
  --cta:         var(--ember);
  --cta-hover:   var(--tallow);
  --accent:      var(--ochre);
  --border:      var(--rule);
  --founding:    var(--fern);          /* founding-member accent */
  --milestone:   var(--turmeric);      /* milestone / achievement accent */

  /* --- Type --- */
  --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:  'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont,
                'Helvetica Neue', Arial, sans-serif;

  /* --- Motion --- */
  --t-settle: 300ms cubic-bezier(0.4, 0, 0.2, 1);   /* ease-in-out */

  /* --- Sizing --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(20, 16, 12, 0.04),
                 0 8px 24px rgba(20, 16, 12, 0.06);
  --shadow-float: 0 12px 32px rgba(20, 16, 12, 0.14);
}

/* ===== Reset / base =========================================================
   Intentionally minimal. Brand book says "Air. Alignment. Restraint."
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;                    /* never 600+ */
  letter-spacing: 0.01em;
  color: var(--text-ink);
  margin: 0 0 0.4em 0;
  line-height: 1.15;
}
h1 { font-size: 2.6rem; font-weight: 300; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em 0; color: var(--text-ink); }

a {
  color: var(--cta);
  text-decoration: none;
  transition: color var(--t-settle);
}
a:hover { color: var(--cta-hover); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* The SHER logo wordmark — never bold, never italic, never with icons. */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tricolour footer stripe. Ember → linen → fern. Part of the logo lockup. */
.tricolour-stripe {
  height: 3px;
  display: flex;
}
.tricolour-stripe > span { flex: 1 1 0; }
.tricolour-stripe > span:nth-child(1) { background: var(--ember); }
.tricolour-stripe > span:nth-child(2) { background: var(--linen); }
.tricolour-stripe > span:nth-child(3) { background: var(--fern); }