/* ═══════════════════════════════════════════════════════════════════════
   MAISON EMERALD — Design Foundation v1
   The shared visual layer for every Maison Emerald OS module.
   Itinera (the Journey Platform) is the first implementation.

   Sources of truth:
   · "Maison Emerald - Brand Guidelines Final.pdf" (colour p.15, type p.18)
   · Official logo SVGs (Brand Guidelines & Assets/Logos)
   Values marked [derived] are not stated in the guidelines; they are
   tints/shades computed from the official palette for contrast and
   surface hierarchy, and are documented in docs/DESIGN_FOUNDATION.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Typefaces (self-hosted variable fonts, no CDN — offline PWA safe) ── */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/cormorant-garamond-var.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/assets/montserrat-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ── Official brand colours (Brand Guidelines p.15, logo SVGs) ── */
  --me-forest:#1c3b3b;        /* Deep Forest Green  */
  --me-copper:#c07f49;        /* Burnt Copper       */
  --me-sage:#8a9d8a;          /* Muted Sage Green   */
  --me-stone:#f0ebe0;         /* Soft Stone         */
  --me-ink:#1a1a1a;           /* near-black, from the mono logo set */
  --me-white:#ffffff;

  /* ── Derived steps [derived] ── */
  --me-forest-deep:#142e2e;   /* hover / pressed forest */
  --me-forest-soft:#e5ebe5;   /* sage-tinted wash for chips & quiet fills */
  --me-copper-deep:#8a5a2b;   /* copper legible at text size — 4.9:1 on stone */
  --me-copper-soft:#f2e4d3;   /* copper wash for ribbons & soft badges */
  --me-stone-raised:#fbf9f3;  /* card surface, one step above stone */
  --me-stone-deep:#e3dccb;    /* hairlines & borders on stone */
  --me-text-1:#212f2f;        /* primary text — forest-tinted ink */
  --me-text-2:#57675d;        /* secondary text — 5.0:1 on stone */
  --me-text-3:#9aa695;        /* whisper text: eyebrows, footers, watermarks */

  /* ── Semantic surfaces ── */
  --me-surface-page:var(--me-stone);
  --me-surface-raised:var(--me-stone-raised);
  --me-surface-inverse:var(--me-forest);
  --me-text-on-inverse:#edf1ea;
  --me-border:var(--me-stone-deep);

  /* ── Typography ── */
  --me-font-display:'Cormorant Garamond',Georgia,'Times New Roman','Apple SD Gothic Neo',serif;
  --me-font-body:'Montserrat',system-ui,-apple-system,'Apple SD Gothic Neo','Pretendard',sans-serif;
  --me-track-label:.22em;     /* uppercase eyebrow tracking */
  --me-track-wordmark:.34em;  /* logo wordmark tracking (from ME_Wordmark.svg) */

  /* ── Spacing (4px base; use the scale, not ad-hoc values) ── */
  --me-space-1:4px;  --me-space-2:8px;  --me-space-3:12px; --me-space-4:16px;
  --me-space-5:24px; --me-space-6:32px; --me-space-7:48px; --me-space-8:64px;
  /* responsive gutter: 16px on a phone, up to 32px on wide screens */
  --me-gutter:clamp(var(--me-space-4),4vw,var(--me-space-6));

  /* ── Shape & elevation ── */
  --me-radius-sm:8px; --me-radius-md:12px; --me-radius-lg:18px; --me-radius-pill:999px;
  --me-shadow-soft:0 3px 14px rgba(28,59,59,.06);
  --me-shadow-lifted:0 10px 26px rgba(28,59,59,.18);

  /* ── Motion (sophisticated but quiet) ── */
  --me-ease:cubic-bezier(.25,.1,.25,1);
  --me-transition-fast:.15s var(--me-ease);
  --me-transition-gentle:.3s var(--me-ease);

  /* ── Focus ── */
  --me-focus-ring:0 0 0 3px rgba(192,127,73,.45);

  /* A brand-pattern cover watermark was tried during the identity sprint and
     removed: at any workable opacity it competed with the journey title.
     The hook stays so the decision (and the slot) are not rediscovered. */
  --me-pattern-watermark:none;
}

/* ─────────────────────────── Primitives ───────────────────────────
   Intentionally lightweight. Nine primitives, no component library. */

/* Typography */
.me-display{font-family:var(--me-font-display);font-weight:500;font-size:clamp(2rem,5vw,2.6rem);
  line-height:1.25;color:var(--me-forest);margin:0}
.me-title{font-family:var(--me-font-display);font-weight:500;font-size:1.45rem;line-height:1.3;
  color:var(--me-forest);margin:0}
.me-heading{font-family:var(--me-font-display);font-weight:600;font-size:1.15rem;line-height:1.4;
  color:var(--me-forest);margin:0}
.me-body{font-family:var(--me-font-body);font-weight:400;font-size:1rem;line-height:1.66;
  color:var(--me-text-1);margin:0}
.me-caption{font-family:var(--me-font-body);font-size:.85rem;line-height:1.5;color:var(--me-text-2);margin:0}
.me-label{font-family:var(--me-font-body);font-weight:600;font-size:.72rem;
  letter-spacing:var(--me-track-label);text-transform:uppercase;color:var(--me-copper-deep);margin:0}

/* Logo — rendered as text so the wordmark always uses the true Montserrat.
   (The official SVGs draw with <text>; referenced via <img> they would fall
   back to Arial, so in-app the logo is this primitive or an inline SVG.) */
.me-logo{display:inline-flex;align-items:center;gap:.7em;color:var(--me-copper);
  font-family:var(--me-font-body);font-weight:300;text-decoration:none}
.me-logo__mark{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.6em;height:2.6em;border:1.5px solid currentColor;border-radius:50%;
  font-size:inherit;letter-spacing:.18em;text-indent:.18em}
.me-logo__wordmark{letter-spacing:var(--me-track-wordmark);text-indent:var(--me-track-wordmark);
  text-transform:uppercase;line-height:1.5;white-space:nowrap}
.me-logo--stacked{flex-direction:column;gap:.9em;text-align:center}
.me-logo--forest{color:var(--me-forest)}
.me-logo--ink{color:var(--me-ink)}
.me-logo--stone{color:var(--me-stone)}

/* Button */
.me-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--me-font-body);font-weight:600;font-size:.95rem;line-height:1.2;
  min-height:44px;padding:12px 26px;border-radius:var(--me-radius-md);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  background:var(--me-surface-inverse);color:var(--me-white);
  transition:background var(--me-transition-fast),box-shadow var(--me-transition-fast),
    border-color var(--me-transition-fast),color var(--me-transition-fast)}
.me-btn:hover{background:var(--me-forest-deep)}
.me-btn:focus-visible{outline:none;box-shadow:var(--me-focus-ring)}
.me-btn:disabled{opacity:.55;cursor:default}
.me-btn--secondary{background:transparent;color:var(--me-copper-deep);border-color:var(--me-copper)}
.me-btn--secondary:hover{background:var(--me-copper-soft)}
.me-btn--quiet{background:transparent;color:var(--me-text-2);border-color:var(--me-border)}
.me-btn--quiet:hover{background:var(--me-forest-soft);color:var(--me-forest)}

/* Card */
.me-card{background:var(--me-surface-raised);border:1px solid var(--me-border);
  border-radius:var(--me-radius-lg);padding:var(--me-space-4) var(--me-space-4);
  box-shadow:var(--me-shadow-soft)}
.me-card--inverse{background:var(--me-surface-inverse);border-color:transparent;
  color:var(--me-text-on-inverse)}

/* Divider — the short copper rule from the brand's editorial layouts */
.me-divider{width:44px;height:1px;background:var(--me-copper);border:0;margin:var(--me-space-5) auto}
.me-divider--full{width:100%;background:var(--me-border);margin:var(--me-space-5) 0}

/* Layout */
.me-page{max-width:660px;margin:0 auto;padding:0 var(--me-gutter)}
.me-page--wide{max-width:1180px}
.me-section{margin:var(--me-space-7) 0}
.me-stack{display:flex;flex-direction:column;gap:var(--me-space-4)}
.me-stack--tight{gap:var(--me-space-2)}
.me-stack--loose{gap:var(--me-space-6)}
.me-inline{display:flex;flex-direction:row;align-items:center;gap:var(--me-space-2);flex-wrap:wrap}