/* ─────────────────────────────────────────────────────────────────────────────
   Earnestine Clay Financial Services — design tokens · v4.0.0 · THE CARD, AS THE MAIN COLORS
   Every value below is read off her printed business card:
     stock   warm blush        #EDD2C5 lit · #E4BFB0 in shadow
     frame   copper-rose       #B87A63
     type    deep red-brown    #6B3B2C — letters, icons, rules, the diamond
     serif   Cormorant Garamond — caps letterspaced for names; italic for the tagline
     sans    Montserrat        — FINANCIAL SERVICES and every label
   Generated from brand/brand.json. That file is the source of truth.

   ROLE NAMES → HER COLORS (the CSS keeps role names so components never change):
     --ec-ink-*   = the brown        --ec-slate-* = muted brown
     --ec-paper   = blush ground     band = deeper blush · raised = cream
     --ec-gold-*  = copper-rose      --ec-rosegold = the frame's sheen

   ★ CONTRAST — copper-500 #B87A63 on the stock is ~2.8:1: RULES, FRAME, HIGHLIGHT,
     DISPLAY HEADINGS ONLY. Small copper text uses copper-700 #85513E (AA).
     Body copy is brown-700 #6B3B2C or darker. On deep bands, copper-400.

   ★ ONE PER SCREEN — copper appears exactly once per screen. Exempt: the
     wordmark's hairline. Everything else —
     eyebrows, labels, markers, notes, links — is muted brown or brown.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── The brown — the type (role: ink) ───────────────────────────────────── */
  --ec-ink-950: #2E150E;
  --ec-ink-900: #3E1F16;   /* fg-1 · headlines · deep bands */
  --ec-ink-800: #4F2A1E;
  --ec-ink-700: #6B3B2C;   /* primary body ink — the card's letter color */
  --ec-ink-600: #7E4A39;

  /* ── Muted brown — secondary (role: slate) ──────────────────────────────── */
  --ec-slate-600: #7E4A39;
  --ec-slate-500: #86503E;   /* fg-3 · eyebrows · captions — AA on the blush ground */
  --ec-slate-400: #A07666;   /* placeholders, list markers */
  --ec-slate-300: #C9A697;   /* text on deep */
  --ec-slate-200: #E4BFB0;

  /* ── Blush — the ground (role: paper) ───────────────────────────────────── */
  --ec-paper: #EDD2C5;           /* page ground — the card's stock, as printed */
  --ec-surface-bg: #EDD2C5;
  --ec-surface-raised: #F6E6DE;  /* cards, forms — a lighter blush; nothing on the site is white */
  --ec-surface-band: #E4BFB0;    /* section bands — the card in shadow */
  --ec-surface-plate: #E4BFB0;   /* the manual's face, the card itself */
  --ec-surface-deep: #3E1F16;
  --ec-hairline: #D4A898;
  --ec-blush-200: #EDD2C5;

  /* ── Copper-rose — the frame, the one accent (role: gold) ───────────────── */
  --ec-gold-700: #85513E;   /* small copper text — passes AA on blush */
  --ec-gold-600: #A66B55;
  --ec-gold-500: #B87A63;   /* THE accent — the frame, the rule, the diamond */
  --ec-gold-400: #C99A85;   /* accent on deep bands */
  --ec-gold-300: #DDB8A8;
  --ec-gold-100: #F0DCD1;
  --ec-highlight: #E6ACA0;  /* the sweep's fill — rose-pink, the card's stock deepened */

  /* ── The frame's sheen — the mark only ──────────────────────────────────── */
  --ec-rosegold: linear-gradient(135deg, #D9A38F 0%, #B87A63 100%);

  /* ── Moss — success, sparingly ──────────────────────────────────────────── */
  --ec-moss-600: #2F5640;
  --ec-moss-500: #3F7D5C;
  --ec-moss-300: #8FB39C;

  /* ── Foreground roles ───────────────────────────────────────────────────── */
  --ec-fg-1: #3E1F16;
  --ec-fg-2: #6B3B2C;
  --ec-fg-3: #86503E;
  --ec-fg-on-deep-1: #F5E3DA;
  --ec-fg-on-deep-2: #DDB8A8;
  --ec-fg-on-deep-accent: #C99A85;

  /* ── State ──────────────────────────────────────────────────────────────── */
  --ec-success: #2F5640;   /* moss-600 — the only moss that passes AA as text on the blush */
  --ec-warn: #B8862E;
  --ec-error: #9E362E;     /* ≥4.5:1 on the blush ground */
  --ec-info: #4A6B8A;

  /* ── Type — the card's two faces ────────────────────────────────────────── */
  --ec-font-display: 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, Georgia, serif;
  --ec-font-body: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ec-font-mono: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;   /* labels: letterspaced caps, as on the card */

  --ec-size-eyebrow: 11px;
  --ec-size-hero: clamp(50px, 7.6vw, 104px);
  --ec-size-display: clamp(38px, 5.4vw, 70px);
  --ec-size-h2: clamp(30px, 4.2vw, 48px);
  --ec-size-h3: clamp(23px, 2.6vw, 30px);
  --ec-size-lede: clamp(17px, 1.5vw, 20px);
  --ec-size-body: 16px;
  --ec-size-small: 14px;
  --ec-size-caption: 12.5px;
  --ec-size-legal: 11.5px;
  --ec-size-counter: clamp(44px, 6.4vw, 88px);

  --ec-track-eyebrow: 0.18em;
  --ec-track-caps: 0.14em;    /* the name, SERVICES, the section titles */
  --ec-track-hero: -0.005em;
  --ec-track-display: 0;
  --ec-measure: 64ch;
  --ec-measure-lede: 58ch;

  /* ── Space ──────────────────────────────────────────────────────────────── */
  --ec-space-1: 4px;  --ec-space-2: 8px;   --ec-space-3: 12px;  --ec-space-4: 16px;
  --ec-space-5: 24px; --ec-space-6: 32px;  --ec-space-7: 48px;  --ec-space-8: 64px;
  --ec-space-9: 96px; --ec-space-10: 128px; --ec-space-11: 160px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --ec-radius-sm: 2px;
  --ec-radius-md: 4px;
  --ec-radius-lg: 8px;
  --ec-radius-pill: 999px;

  /* ── Elevation — brown-tinted ───────────────────────────────────────────── */
  --ec-shadow-card: 0 1px 2px rgba(62,31,22,0.06), 0 6px 20px rgba(62,31,22,0.07);
  --ec-shadow-raised: 0 2px 4px rgba(62,31,22,0.07), 0 14px 36px rgba(62,31,22,0.11);
  --ec-shadow-deep: 0 4px 8px rgba(62,31,22,0.08), 0 28px 64px rgba(62,31,22,0.16);
  --ec-shadow-nav: 0 1px 0 rgba(212,168,152,0.9);
  --ec-ring-gold: 0 0 0 2px #EDD2C5, 0 0 0 4px #3E1F16;   /* focus ring is INK, not copper: 10.4:1 (WCAG 2.4.11) and it never becomes a second copper on screen */

  /* ── Grid ───────────────────────────────────────────────────────────────── */
  --ec-max: 1200px;
  --ec-doc-max: 760px;
  --ec-gutter: 24px;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ec-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ec-ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --ec-ease-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ec-motion-fast: 140ms var(--ec-ease);
  --ec-motion-base: 240ms var(--ec-ease);
  --ec-motion-slow: 480ms var(--ec-ease-in);
}

/* ── highlight-sweep — the signature. One per screen. ──────────────────────── */
.hl {
  background-image: linear-gradient(var(--ec-highlight), var(--ec-highlight));
  background-repeat: no-repeat;
  background-size: 100% 0.36em;
  background-position: 0 90%;
  padding: 0 0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;   /* a wrapped phrase gets a sweep on every line, not just the last */
}

/* ── the card's rule: a hairline with a centered diamond ───────────────────── */
.rule-d { position: relative; height: 1px; background: var(--ec-gold-500); }
.rule-d::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--ec-gold-500); transform: translate(-50%, -50%) rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* v1 aliases — proposal.css and brand-book.html reference a few. */
:root {
  --ec-espresso-900: var(--ec-ink-900); --ec-espresso-800: var(--ec-ink-800); --ec-espresso-700: var(--ec-ink-700);
  --ec-espresso-600: var(--ec-ink-600); --ec-espresso-400: var(--ec-slate-400);
  --ec-copper-600: var(--ec-gold-700); --ec-copper-500: var(--ec-gold-500); --ec-copper-400: var(--ec-gold-400); --ec-copper-300: var(--ec-gold-300);
  --ec-blush-300: var(--ec-hairline); --ec-blush-100: var(--ec-surface-band); --ec-cream: var(--ec-surface-raised);
}