/* Identia — design tokens (drop-in)
 * Pair with `<link rel="preconnect" href="https://fonts.googleapis.com">`
 * and the Google Fonts URL for Cormorant Garamond + Inter.
 */

:root {
  /* --- Color: raw scale --- */
  --color-sage-900: #2F4434;
  --color-sage-700: #3F5A42;
  --color-sage-500: #5F7460;
  --color-sage-200: #C7D3C2;

  --color-cream-50:  #F4F0E8;
  --color-cream-100: #EDEAE3;

  --color-taupe-500: #A8A498;

  --color-walnut-500: #A06A3F;
  --color-walnut-700: #6E4326;

  --color-clinical-blue-200: #CFE0E6;
  --color-clinical-blue-400: #7FB1C0;

  --color-charcoal-900: #1F2421;
  --color-white-pure:   #FFFFFF;
  --color-gold-500:     #B79268;

  /* --- Color: semantic aliases --- */
  --bg-page:        var(--color-cream-100);
  --bg-section:     var(--color-cream-50);
  --bg-section-alt: var(--color-sage-200);
  --bg-band:        var(--color-sage-500); /* the sage banner-top motif */
  --brand:          var(--color-sage-700);
  --brand-strong:   var(--color-sage-900);
  --text:           var(--color-charcoal-900);
  --text-on-photo:  var(--color-white-pure);
  --text-muted:     var(--color-taupe-500);
  --accent:         var(--color-gold-500);

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  --text-hero:  clamp(3rem, 8vw, 6rem);
  --text-h1:    clamp(2.25rem, 5vw, 3.5rem);
  --text-h2:    1.875rem;
  --text-h3:    1.5rem;
  --text-body:  1.0625rem;
  --text-small: 0.875rem;

  --leading-display: 1.05;
  --leading-body:    1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em;

  --weight-display: 500;
  --weight-body:    400;
  --weight-bold:    700;

  /* --- Radius --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* --- Shadow --- */
  --shadow-soft:   0 2px 14px rgba(31, 36, 33, 0.06);
  --shadow-lifted: 0 12px 40px rgba(31, 36, 33, 0.10);

  /* --- Space (4-px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* --- Layout --- */
  --container-max: 1200px;
  --ratio-post:    4 / 5;
}

/* --- Base type defaults (opt-in via class so this file stays a token sheet) --- */
.identia-base {
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
}

.identia-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
}

/* The recurring "sage band carrying the headline" motif from the IG posts */
.identia-band {
  background: var(--bg-band);
  color: var(--text-on-photo);
  padding: var(--space-7) var(--space-6);
}