/* =========================================================================
   Matt Rutherford brand tokens, v0.1 (19 Oct 2026)
   One system, one accent per site.

   Use:
     1. Load the fonts (Google Fonts):
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     2. Include this file.
     3. Set the site on <html>: <html data-site="coaching">
        Values: coaching | writing | values | year | oblique | write
   Ghost Pro: put this file in the theme's assets/css and set data-site in
   default.hbs, or paste the :root and the one [data-site] block you need
   into Site header code injection.
   ========================================================================= */

:root {
  /* Neutrals: shared by every site */
  --mr-ground: #FAFAF8;      /* page background */
  --mr-paper: #FFFFFF;       /* cards, inputs */
  --mr-alt: #F3F0EB;         /* alternate bands, warm cream */
  --mr-ink: #1A1A1A;         /* text and headings */
  --mr-muted: #686460;       /* secondary text (5.6:1 on ground) */
  --mr-faint: #A8A099;       /* decorative only, never text */
  --mr-line: #E2DEDA;        /* borders and rules */

  /* Accent: defaults to coaching teal, overridden per site below */
  --mr-accent: #3A6B6B;
  --mr-accent-dark: #2B5050; /* hover, pressed */
  --mr-accent-pale: #E6EFEF; /* tinted panels, highlights */
  --mr-on-accent: #FAFAF8;   /* text on accent */

  /* Type */
  --mr-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mr-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (1.25 ratio, 18px base). Serif sizes run larger because
     Cormorant has a small x-height. */
  --mr-text-xs: 0.75rem;     /* 12 eyebrows, descriptors (caps, tracked) */
  --mr-text-sm: 0.875rem;    /* 14 captions, meta */
  --mr-text-base: 1.125rem;  /* 18 body */
  --mr-text-lg: 1.375rem;    /* 22 lead paragraph */
  --mr-display-sm: 1.75rem;  /* 28 h3 (serif) */
  --mr-display-md: 2.5rem;   /* 40 h2 (serif) */
  --mr-display-lg: 3.5rem;   /* 56 h1 (serif) */
  --mr-display-xl: clamp(2.75rem, 6vw, 4.5rem); /* hero */

  --mr-leading-body: 1.65;
  --mr-leading-display: 1.1;
  --mr-tracking-caps: 0.16em;

  /* Spacing (4px base) */
  --mr-space-1: 0.25rem;
  --mr-space-2: 0.5rem;
  --mr-space-3: 0.75rem;
  --mr-space-4: 1rem;
  --mr-space-6: 1.5rem;
  --mr-space-8: 2rem;
  --mr-space-12: 3rem;
  --mr-space-16: 4rem;
  --mr-space-24: 6rem;

  /* Shape */
  --mr-radius-sm: 4px;       /* inputs, tags */
  --mr-radius-md: 8px;       /* buttons, cards */
  --mr-radius-lg: 16px;      /* large panels, images */
  --mr-measure: 66ch;        /* reading column */
  --mr-wide: 1120px;         /* page width */
}

/* Per-site accents. All accents pass WCAG AA (4.5:1) as text on ground
   and with ground-coloured text on top of them. */
[data-site="coaching"] { --mr-accent: #3A6B6B; --mr-accent-dark: #2B5050; --mr-accent-pale: #E6EFEF; } /* Teal  */
[data-site="writing"]  { --mr-accent: #4A6542; --mr-accent-dark: #384C32; --mr-accent-pale: #E7ECE3; } /* Moss  */
[data-site="values"]   { --mr-accent: #694A63; --mr-accent-dark: #4F374A; --mr-accent-pale: #EFE8EC; } /* Plum  */
[data-site="year"]     { --mr-accent: #7A5A22; --mr-accent-dark: #5C441A; --mr-accent-pale: #F3ECDF; } /* Ochre */
[data-site="oblique"]  { --mr-accent: #3E5577; --mr-accent-dark: #2F4059; --mr-accent-pale: #E6EAF0; } /* Slate */
[data-site="write"]    { --mr-accent: #924B30; --mr-accent-dark: #6E3824; --mr-accent-pale: #F4E9E3; } /* Clay  */

/* -------------------------------------------------------------------------
   Optional base styles. Delete this section if a theme already styles these.
   ------------------------------------------------------------------------- */
.mr-base body, body.mr-base {
  background: var(--mr-ground);
  color: var(--mr-ink);
  font: 400 var(--mr-text-base)/var(--mr-leading-body) var(--mr-sans);
  -webkit-font-smoothing: antialiased;
}
.mr-base :is(h1, h2, h3) {
  font-family: var(--mr-serif);
  font-weight: 600;
  line-height: var(--mr-leading-display);
  letter-spacing: -0.005em;
  color: var(--mr-ink);
}
.mr-base h1 { font-size: var(--mr-display-lg); }
.mr-base h2 { font-size: var(--mr-display-md); }
.mr-base h3 { font-size: var(--mr-display-sm); }
.mr-base h1 em, .mr-base h2 em { font-style: italic; font-weight: 500; color: var(--mr-accent); }
.mr-base a { color: var(--mr-accent); text-underline-offset: 0.2em; }
.mr-base a:hover { color: var(--mr-accent-dark); }

.mr-eyebrow {
  font: 500 var(--mr-text-xs)/1.4 var(--mr-sans);
  letter-spacing: var(--mr-tracking-caps);
  text-transform: uppercase;
  color: var(--mr-accent);
}
.mr-button {
  display: inline-block;
  padding: 0.85em 1.5em;
  border-radius: var(--mr-radius-md);
  background: var(--mr-accent);
  color: var(--mr-on-accent);
  font: 500 1rem/1 var(--mr-sans);
  text-decoration: none;
  transition: background 0.15s ease;
}
.mr-button:hover { background: var(--mr-accent-dark); color: var(--mr-on-accent); }
.mr-button--quiet { background: transparent; color: var(--mr-ink); box-shadow: inset 0 0 0 1px var(--mr-line); }
.mr-button--quiet:hover { background: var(--mr-alt); color: var(--mr-ink); }
.mr-panel { background: var(--mr-accent-pale); border-radius: var(--mr-radius-lg); padding: var(--mr-space-8); }
.mr-quote { font: italic 500 var(--mr-display-sm)/1.3 var(--mr-serif); color: var(--mr-accent); border-left: 3px solid var(--mr-accent); padding-left: var(--mr-space-6); }