/* ============================================================
   KATY MOSAIC — Colors & Typography
   Integrative Services & Assessments
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ======================================================
     CORE PALETTE — Layered Greens
     Growth, calm, renewal, stability.
     Sampled from the mosaic leaf mark.
     ====================================================== */

  /* Brand greens (dark → light) */
  --km-forest-deep:   #2E4A2A;  /* deepest green — mark shadow */
  --km-forest:        #3D5A3A;  /* primary wordmark color */
  --km-moss:          #587B4F;  /* mid-tone, body accents */
  --km-sage:          #7A9A6D;  /* descriptor text color */
  --km-leaf:          #9FBF8C;  /* lively accent green */
  --km-pale:          #C9DBB8;  /* pale green backgrounds */
  --km-whisper:       #E8EFDF;  /* softest wash */

  /* Neutrals — warm off-whites + stone */
  --km-paper:         #FBFAF5;  /* primary page background */
  --km-bone:          #F5F2E9;  /* card / secondary surface */
  --km-linen:         #EDE8D8;  /* subtle divider / hairline */
  --km-stone:         #B8B3A3;  /* muted text */
  --km-ink:           #2B2A26;  /* primary text (warm black) */
  --km-ink-soft:      #4A4940;  /* secondary text */

  /* Semantic accents (sparingly) */
  --km-gold:          #B5A24B;  /* rare highlight / awards */
  --km-terracotta:    #B86B4B;  /* warmth, caution, empathy */
  --km-rose:          #D8A7A0;  /* soft human accent for headline emphasis */

  /* ======================================================
     SEMANTIC TOKENS
     ====================================================== */

  /* Surfaces */
  --bg:               var(--km-paper);
  --bg-elevated:      #FFFFFF;
  --bg-muted:         var(--km-bone);
  --bg-subtle:        var(--km-whisper);
  --bg-inverse:       var(--km-forest);

  /* Foreground */
  --fg:               var(--km-ink);
  --fg-soft:          var(--km-ink-soft);
  --fg-muted:         var(--km-stone);
  --fg-inverse:       var(--km-paper);
  --fg-brand:         var(--km-forest);
  --fg-brand-soft:    var(--km-sage);

  /* Lines */
  --border:           rgba(61, 90, 58, 0.18);
  --border-soft:      rgba(61, 90, 58, 0.08);
  --border-strong:    rgba(61, 90, 58, 0.35);
  --hairline:         var(--km-sage); /* the signature wordmark rule */

  /* Focus / accent */
  --accent:           var(--km-moss);
  --accent-strong:    var(--km-forest);
  --accent-soft:      var(--km-leaf);

  /* ======================================================
     TYPOGRAPHY
     ====================================================== */

  --font-serif:       'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:        'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, monospace;

  /* Size scale (1rem = 16px) */
  --text-xs:          0.75rem;    /* 12px — fine print */
  --text-sm:          0.875rem;   /* 14px — meta / labels */
  --text-base:        1rem;       /* 16px — body */
  --text-md:          1.125rem;   /* 18px — comfortable body */
  --text-lg:          1.375rem;   /* 22px — lead paragraph */
  --text-xl:          1.75rem;    /* 28px — h4 */
  --text-2xl:         2.25rem;    /* 36px — h3 */
  --text-3xl:         3rem;       /* 48px — h2 */
  --text-4xl:         4rem;       /* 64px — h1 */
  --text-5xl:         5.5rem;     /* 88px — display */

  /* Line heights */
  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-relaxed:       1.7;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;   /* the descriptor lockup */

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

  /* ======================================================
     SPACING (4px 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;

  /* ======================================================
     RADII — soft, not playful
     ====================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ======================================================
     SHADOWS — gentle, like natural light
     ====================================================== */
  --shadow-xs:  0 1px 2px rgba(46, 74, 42, 0.06);
  --shadow-sm:  0 2px 8px rgba(46, 74, 42, 0.06), 0 1px 2px rgba(46, 74, 42, 0.04);
  --shadow-md:  0 8px 24px rgba(46, 74, 42, 0.08), 0 2px 6px rgba(46, 74, 42, 0.05);
  --shadow-lg:  0 20px 48px rgba(46, 74, 42, 0.12), 0 4px 12px rgba(46, 74, 42, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(46, 74, 42, 0.06);

  /* ======================================================
     MOTION
     ====================================================== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-med:     260ms;
  --dur-slow:    420ms;
}

/* ============================================================
   BASE TYPE STYLES
   ============================================================ */

html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif display — the "KATY MOSAIC" voice */
h1, h2, h3, .display, .serif {
  font-family: var(--font-serif);
  color: var(--fg-brand);
  font-weight: var(--w-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); line-height: var(--lh-snug); }

/* Sans subheads — the "Integrative Services & Assessments" voice */
h4, h5, h6, .eyebrow {
  font-family: var(--font-sans);
  color: var(--fg-soft);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
}
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* The signature descriptor treatment */
.eyebrow,
.descriptor {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--km-sage);
}

p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  text-wrap: pretty;
  max-width: 68ch;
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--fg-brand);
  line-height: var(--lh-snug);
}

small, .meta {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

a {
  color: var(--fg-brand);
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--km-moss); }

/* The signature hairline — used under the wordmark and as section dividers */
.hairline {
  border: 0;
  border-top: 1px solid var(--km-sage);
  opacity: 0.6;
}

/* Utility: wordmark lockup */
.km-wordmark {
  font-family: var(--font-serif);
  color: var(--km-forest);
  letter-spacing: 0.02em;
  font-weight: var(--w-regular);
}
.km-descriptor {
  font-family: var(--font-sans);
  color: var(--km-sage);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
}