/* =====================================================================
   Grace Filled Hair — Design Tokens
   Colors, type, spacing, semantic vars. Link from any HTML file.
   ===================================================================== */

/* ---- Web fonts ----
   Cormorant Garamond loaded from local brand-licensed files in /fonts.
   Inter and Caveat still loaded from Google Fonts (no licensed files yet — replace if/when provided). */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=Caveat:wght@400;500&display=swap');

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== Colors ===== */
  --color-cream:           #F5EFE6;  /* primary bg */
  --color-ivory:           #FBF7F1;  /* secondary bg, cards */
  --color-charcoal:        #2E2A26;  /* body text — never pure black */
  --color-walnut:          #3D2F22;  /* headlines, logo */
  --color-sage:            #8A9A7B;  /* hairlines, dividers, small sprigs */
  --color-terracotta:      #B5654A;  /* CTA, emphasis, link hover */
  --color-terracotta-deep: #8E4A33;  /* pressed / hover */

  /* Tints — used very sparingly */
  --color-walnut-15:       rgba(61, 47, 34, 0.15);
  --color-walnut-08:       rgba(61, 47, 34, 0.08);
  --color-sage-30:         rgba(138, 154, 123, 0.30);
  --color-terracotta-08:   rgba(181, 101, 74, 0.08);

  /* ===== Semantic color roles ===== */
  --bg-page:        var(--color-cream);
  --bg-surface:     var(--color-ivory);
  --bg-emphasis:    var(--color-terracotta);
  --fg-body:        var(--color-charcoal);
  --fg-display:     var(--color-walnut);
  --fg-muted:       rgba(46, 42, 38, 0.65);
  --fg-quiet:       rgba(46, 42, 38, 0.45);
  --fg-on-emphasis: var(--color-cream);
  --border-hair:    var(--color-sage);
  --border-card:    var(--color-walnut-15);

  /* ===== Type families ===== */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-script:  'Caveat', 'Cormorant Garamond', cursive;

  /* ===== Type scale (modular, fluid-friendly) ===== */
  --fs-display:    clamp(3rem, 6vw, 5rem);     /* 48–80px hero */
  --fs-h1:         clamp(2.25rem, 4vw, 3.5rem); /* 36–56 */
  --fs-h2:         clamp(1.75rem, 3vw, 2.5rem); /* 28–40 */
  --fs-h3:         clamp(1.375rem, 2vw, 1.75rem); /* 22–28 */
  --fs-h4:         1.25rem;   /* 20 */
  --fs-lead:       1.1875rem; /* 19 */
  --fs-body:       1rem;      /* 16 */
  --fs-small:      0.9375rem; /* 15 */
  --fs-caption:    0.8125rem; /* 13 */
  --fs-eyebrow:    0.75rem;   /* 12 */

  --lh-display: 1.15;
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --lh-tight:   1.4;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;

  /* ===== Spacing (8-pt) ===== */
  --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;

  /* ===== Radii ===== */
  --radius-sm: 4px;   /* inputs, small buttons */
  --radius-md: 6px;   /* cards */
  --radius-lg: 8px;   /* images */

  /* ===== Borders ===== */
  --border-width: 1px;

  /* ===== Shadows (used very sparingly) ===== */
  --shadow-soft: 0 1px 2px rgba(46,42,38,0.06), 0 4px 12px rgba(46,42,38,0.04);
  --shadow-none: none;

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;

  /* ===== Layout ===== */
  --container-max: 1180px;
  --prose-max:     640px;
  --header-h:      72px;
}

/* ===================================================================
   Semantic element styles — link this file and these just work.
   =================================================================== */

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display serif, walnut, gentle */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-display);
  font-weight: 400;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--fg-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-sage);
  font-weight: 500;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; max-width: var(--prose-max); }
p:last-child { margin-bottom: 0; }

small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

/* Links */
a {
  color: var(--color-terracotta);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-terracotta-deep); text-decoration: underline; }

/* Hairline divider */
hr, .hairline {
  border: 0;
  height: 1px;
  background: var(--color-sage);
  margin: var(--space-7) 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}