/* =============================================================
   Morning Coffee — Colors & Type
   A warm, editorial palette. Cream + near-black + a single teal.
   No pure white. No pure black. No gradients.
   ============================================================= */

/* Raleway — utility sans — bundled variable font, weights 400–700. */
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Lora — editorial serif — bundled variable font, weights 400–700. */
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Lora-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ───── Colour: Light (default) ───── */
  --mc-bg-primary:    #F0EBE0;  /* warm cream — screens, pages */
  --mc-bg-secondary:  #EDE8DD;  /* card surfaces, secondary regions */
  --mc-bg-tertiary:   #E5DFD5;  /* chip backgrounds, recessed areas */

  --mc-text-primary:   #1A1917; /* headlines, body — warm near-black */
  --mc-text-secondary: #6B6660; /* bylines, metadata, supporting */
  --mc-text-tertiary:  #9E9890; /* timestamps, placeholders, muted */
  --mc-text-inverse:   #F0EBE0; /* cream text on teal/dark */

  --mc-action:          #1A7B6B; /* sole interactive colour — teal */
  --mc-action-hover:    #166B5D; /* slightly darker teal for hover */
  --mc-primary-light:   #E8F3F0; /* teal tint — selected, toasts */

  --mc-trust-high:      #1A7B6B; /* teal */
  --mc-trust-medium:    #C07B3C; /* amber — trust signals only */
  --mc-danger:          #C0392B; /* irreversible actions only */

  --mc-divider:         #D6D0C8; /* warm grey hairlines */
  --mc-warm-grey:       #D6D0C8;
  --mc-border:          #D6D0C8;

  /* ───── Type ───── */
  --mc-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --mc-font-sans:  'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type roles (from DESIGN-LANGUAGE.md) */
  --mc-display-size:   48px; --mc-display-lh:   56px; --mc-display-weight:   700;
  --mc-headline-size:  30px; --mc-headline-lh:  38px; --mc-headline-weight:  700;
  --mc-subhead-size:   20px; --mc-subhead-lh:   26px; --mc-subhead-weight:   600;
  --mc-section-size:   11px; --mc-section-lh:   16px; --mc-section-weight:   600;
  --mc-body-size:      16px; --mc-body-lh:      24px; --mc-body-weight:      400;
  --mc-caption-size:   12px; --mc-caption-lh:   18px; --mc-caption-weight:   400;
  --mc-cta-size:       15px; --mc-cta-lh:       22px; --mc-cta-weight:       600;

  /* Letter-spacing — Lora is drawn generously, so always tighten it.
     Raleway sits naturally at 0. */
  --mc-tracking-display:  -0.035em;  /* 40px+ Lora */
  --mc-tracking-headline: -0.02em;   /* 24–40px Lora */
  --mc-tracking-subhead:  -0.015em;  /* 18–24px Lora */
  --mc-tracking-serif:    -0.01em;   /* default for any Lora text ≤18px */

  /* ───── Spacing (4pt grid) ───── */
  --mc-xxs: 4px;
  --mc-xs:  8px;
  --mc-sm:  12px;
  --mc-md:  16px;
  --mc-lg:  20px;
  --mc-xl:  24px;
  --mc-xxl: 32px;
  --mc-x3l: 40px;
  --mc-x4l: 48px;
  --mc-x5l: 64px;

  /* ───── Radius ───── */
  --mc-radius-sm:   4px;
  --mc-radius-md:   8px;
  --mc-radius-lg:   12px;
  --mc-radius-xl:   16px;
  --mc-radius-full: 9999px;

  /* ───── Elevation ───── */
  --mc-shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.08);
  --mc-shadow-md: 0 2px 4px rgba(26, 25, 23, 0.12);
  --mc-shadow-lg: 0 4px 8px rgba(26, 25, 23, 0.16);
}

/* Dark mode — warm charcoal, never true black */
[data-theme="dark"], .mc-dark {
  --mc-bg-primary:    #1A1917;
  --mc-bg-secondary:  #252320;
  --mc-bg-tertiary:   #2E2B28;

  --mc-text-primary:   #F0EBE0;
  --mc-text-secondary: #B5AFA8;
  --mc-text-tertiary:  #7A746E;
  --mc-text-inverse:   #1A1917;

  --mc-action:         #1D8C7C;
  --mc-action-hover:   #22A08D;
  --mc-primary-light:  #1F322E;

  --mc-divider:        #3A3530;
  --mc-warm-grey:      #3A3530;
  --mc-border:         #3A3530;
}

/* =============================================================
   Semantic roles
   ============================================================= */

.mc-display {
  font-family: var(--mc-font-serif);
  font-size: var(--mc-display-size);
  line-height: var(--mc-display-lh);
  font-weight: var(--mc-display-weight);
  color: var(--mc-text-primary);
  letter-spacing: var(--mc-tracking-display);
}

h1, .mc-h1 {
  font-family: var(--mc-font-serif);
  font-size: var(--mc-headline-size);
  line-height: var(--mc-headline-lh);
  font-weight: var(--mc-headline-weight);
  letter-spacing: var(--mc-tracking-headline);
  color: var(--mc-text-primary);
  margin: 0;
}

h2, .mc-h2 {
  font-family: var(--mc-font-serif);
  font-size: var(--mc-subhead-size);
  line-height: var(--mc-subhead-lh);
  font-weight: var(--mc-subhead-weight);
  letter-spacing: var(--mc-tracking-subhead);
  color: var(--mc-text-primary);
  margin: 0;
}

.mc-section-label {
  font-family: var(--mc-font-sans);
  font-size: var(--mc-section-size);
  line-height: var(--mc-section-lh);
  font-weight: var(--mc-section-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-text-secondary);
}

p, .mc-body {
  font-family: var(--mc-font-sans);
  font-size: var(--mc-body-size);
  line-height: var(--mc-body-lh);
  font-weight: var(--mc-body-weight);
  color: var(--mc-text-primary);
  margin: 0;
}

small, .mc-caption {
  font-family: var(--mc-font-sans);
  font-size: var(--mc-caption-size);
  line-height: var(--mc-caption-lh);
  font-weight: var(--mc-caption-weight);
  color: var(--mc-text-secondary);
}

.mc-cta {
  font-family: var(--mc-font-sans);
  font-size: var(--mc-cta-size);
  line-height: var(--mc-cta-lh);
  font-weight: var(--mc-cta-weight);
}

code, kbd, pre {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ───── Base ───── */
body {
  margin: 0;
  background: var(--mc-bg-primary);
  color: var(--mc-text-primary);
  font-family: var(--mc-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--mc-action);
  text-decoration: none;
}
a:hover { color: var(--mc-action-hover); }

hr, .mc-hairline {
  border: 0;
  height: 1px;
  background: var(--mc-divider);
  margin: var(--mc-md) 0;
}

/* Newspaper-style section divider with flanking rules */
.mc-section-divider {
  display: flex;
  align-items: center;
  gap: var(--mc-sm);
  color: var(--mc-text-secondary);
  font-family: var(--mc-font-sans);
  font-size: var(--mc-section-size);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-section-divider::before,
.mc-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mc-divider);
}