/* =========================================================================
   Miramay Design System — Core Tokens
   Colors, typography, spacing, radii, shadows, motion.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --slate:        #1C2B3A;   /* primary */
  --slate-hover:  #13202E;
  --gold:         #C4874A;   /* CTA accent, eyebrow */
  --gold-hover:   #B67B3E;
  --gold-soft:    #E8C89E;
  --sage:         #4A7C6F;   /* trust */
  --sage-soft:    #CFE0D9;
  --cream:        #F7F3EE;   /* legacy surface - avoid for page bg */
  --sand:         #E8DDD0;   /* legacy - avoid for page bg */
  --white:        #FFFFFF;
  --off-white:    #FAF9F7;   /* page background - barely off-white, warm undertone */

  /* ---------- Neutrals derived from slate ---------- */
  --slate-90:     #2D3C4A;
  --slate-75:     #4A5968;
  --slate-50:     #78838F;
  --slate-25:     #B4BAC2;
  --slate-10:     rgba(28, 43, 58, 0.10);
  --slate-05:     rgba(28, 43, 58, 0.05);

  /* ---------- Semantic foreground/background ---------- */
  --fg-1:         var(--slate);       /* primary text */
  --fg-2:         var(--slate-75);    /* secondary text */
  --fg-3:         var(--slate-50);    /* tertiary / meta */
  --fg-on-dark:   var(--cream);
  --fg-accent:    var(--gold);
  --fg-trust:     var(--sage);

  --bg-page:      var(--off-white);  /* #FAF9F7 */
  --bg-surface:   var(--white);
  --bg-elevated:  var(--white);
  --bg-contrast:  var(--slate);

  --border-subtle: rgba(28, 43, 58, 0.08);
  --border-default: rgba(28, 43, 58, 0.14);
  --border-strong:  rgba(28, 43, 58, 0.24);

  /* ---------- Typography ---------- */
  --font-serif: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (desktop) */
  --text-hero:    96px;  /* Hero headline */
  --text-h1:      72px;
  --text-h2:      56px;
  --text-h3:      40px;
  --text-h4:      28px;
  --text-h5:      22px;
  --text-lg:      20px;  /* lede body */
  --text-base:    17px;  /* body */
  --text-sm:      15px;
  --text-xs:      13px;
  --text-eyebrow: 12px;  /* ALL-CAPS labels */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-hero:    -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body:     0em;
  --tracking-eyebrow:  0.14em;
  --tracking-pill:     0.04em;

  /* ---------- 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;

  --space-section: 96px;
  --space-gutter:  24px;
  --space-max-w:   1200px;
  --space-prose-w: 640px;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ---------- Shadows (warm-tinted, slate-based) ---------- */
  --shadow-sm:  0 1px 2px rgba(28, 43, 58, 0.06);
  --shadow-md:  0 6px 20px rgba(28, 43, 58, 0.08);
  --shadow-lg:  0 20px 50px rgba(28, 43, 58, 0.12);
  --shadow-focus: 0 0 0 3px rgba(196, 135, 74, 0.35);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro: 120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;
}

/* =========================================================================
   Base / semantic element styles
   ========================================================================= */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }
h5 { font-size: var(--text-h5); line-height: var(--leading-snug); }

p  { margin: 0 0 var(--space-4); line-height: var(--leading-normal); color: var(--fg-2); }
p.lede { font-size: var(--text-lg); color: var(--fg-1); line-height: var(--leading-snug); }

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-micro) var(--ease);
}
a:hover { color: var(--gold); }

small, .text-sm { font-size: var(--text-sm); color: var(--fg-2); }
.text-xs { font-size: var(--text-xs); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, var(--text-hero));
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}

/* =========================================================================
   Utility classes
   ========================================================================= */
.bg-page     { background: var(--bg-page); }
.bg-surface  { background: var(--bg-surface); }
.bg-slate    { background: var(--slate); color: var(--fg-on-dark); }
.bg-cream    { background: var(--cream); }
.bg-sand     { background: var(--sand); }
.text-gold   { color: var(--gold); }
.text-sage   { color: var(--sage); }
.text-slate  { color: var(--slate); }

.container {
  max-width: var(--space-max-w);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

/* =========================================================================
   Components — buttons, pills, inputs, cards
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--slate); color: var(--cream); }
.btn-primary:hover { background: var(--slate-hover); color: var(--cream); }

.btn-accent  { background: var(--gold); color: var(--white); }
.btn-accent:hover  { background: var(--gold-hover); color: var(--white); }

.btn-ghost   { background: transparent; color: var(--slate); border-color: var(--border-default); }
.btn-ghost:hover { background: var(--cream); color: var(--slate); }

.btn-lg { padding: 18px 28px; font-size: var(--text-lg); border-radius: var(--radius-md); }
.btn-sm { padding: 10px 16px; font-size: var(--text-sm); }

/* Pills — trust badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--cream);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: var(--tracking-pill);
}
.pill-sage { background: var(--sage-soft); border-color: transparent; color: var(--sage); }
.pill-gold { background: var(--gold-soft); border-color: transparent; color: var(--slate); }
.pill-slate { background: var(--slate); color: var(--cream); border-color: transparent; }

/* Inputs */
.input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
.input::placeholder { color: var(--fg-3); }
.input:focus { outline: none; border-color: var(--gold); box-shadow: var(--shadow-focus); }

.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: var(--space-2);
}

/* Cards */
.card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card-elevated {
  border: none;
  box-shadow: var(--shadow-md);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Divider */
.hr { height: 1px; background: var(--border-subtle); border: 0; margin: var(--space-6) 0; }

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