/* MIRAE 2.0 mobile design tokens. Paper, ink and one restrained jade; the warm sun accent is used sparingly
   (imagery, the price note). Fonts are the production files (Libre Baskerville, Manrope, Yuji Boku subset). */
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400 700;font-display:swap;src:url("/m2/fonts/libre-baskerville.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/m2/fonts/manrope.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Yuji Boku";font-style:normal;font-weight:400;font-display:swap;src:url("/m2/fonts/yuji-boku.woff2") format("woff2")}

/* The cascade (UI Reference v1, Phase A): tokens < base < layout < components < pages < legacy. "legacy" holds the
   Mission 7–8 rules of the screens a later phase migrates; it shrinks every phase. Only the membership-owned elements
   (member bar, sign-in dialogs) are styled outside the layers, at the end of app.css. */
@layer tokens, base, layout, components, pages, legacy;

@layer tokens{
:root{
  color-scheme:light;
  /* colour */
  --paper:#F6F2E8;--paper-deep:#EEE7D7;--surface:#FFFDF8;--surface-sunk:#F9F5EC;
  /* text on --paper: ink 14:1, ink-2 10:1, ink-3 5.7:1, ink-mute 4.8:1 (WCAG AA for body text) */
  --ink:#1E2A26;--ink-2:#34423D;--ink-3:#56625D;--ink-mute:#646D68;
  --line:#E4DCCA;--line-strong:#CFC4AC;
  --jade:#253E37;--jade-press:#1A2E28;--jade-soft:#E4EBE6;--jade-ink:#F6F2E8;
  --gold:#7D5F27;--gold-soft:#F1E8D2;
  --sun:#B8432F;--sun-soft:#F6E2DA;
  --error:#9C3A28;--error-soft:#FBECE7;
  --focus-ring:0 0 0 3px rgba(37,62,55,.30);
  /* type */
  --font-serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-brush:"Yuji Boku","Noto Serif KR","Songti SC",serif;
  --t-label:12px;--t-small:14px;--t-body:16px;--t-lead:18px;--t-h3:20px;--t-h2:26px;--t-h1:34px;
  --lh-tight:1.18;--lh-snug:1.35;--lh-body:1.6;
  --track-label:.09em;
  /* space */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;--s-9:56px;
  --gutter:20px;--content:560px;
  /* shape */
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --shadow-card:0 1px 2px rgba(30,42,38,.05),0 10px 28px -20px rgba(30,42,38,.35);
  --shadow-float:0 -8px 24px -16px rgba(30,42,38,.35);
  /* touch */
  --tap:48px;
  --header-h:56px;--nav-h:64px;
  --safe-bottom:env(safe-area-inset-bottom,0px);

  /* ---- UI Reference v1 (§3): semantic names for the values above, and the layout system ---- */
  /* colour (§3.1) */
  --page-bg:var(--paper);--page-bg-deep:var(--paper-deep);--surface-muted:var(--surface-sunk);--surface-tint:var(--jade-soft);
  --text-primary:var(--ink);--text-secondary:var(--ink-2);--text-tertiary:var(--ink-3);
  --accent:var(--jade);--accent-press:var(--jade-press);--on-accent:var(--jade-ink);--accent-disabled:#8FA19A;
  --label:var(--gold);--paid:var(--sun);--border:var(--line);--border-strong:var(--line-strong);--error-bg:var(--error-soft);
  --success:#2F6B4F;--scrim:rgba(30,42,38,.38);--wash:rgba(37,62,55,.07);
  /* the reading's topic line and the local preview's stand-in note (Mission 11: named here instead of raw colours) */
  --topic:#9C3B28;--stand-in-ink:#7A2D1F;
  --bar-bg:color-mix(in srgb,var(--paper) 94%,transparent);
  --shadow-sheet:0 -12px 40px -12px rgba(30,42,38,.35);
  --veil:color-mix(in srgb,var(--paper) 92%,transparent);
  /* type (§3.2; phone values, tablet and desktop below; A-2: the phone page title stays 26px) */
  --type-display:34px;--type-h1:26px;--type-h2:24px;--type-h3:19px;--type-lead:16px;--type-body:16px;--type-reading:17px;
  --type-small:14px;--type-label:12px;--type-nav:15px;
  /* spacing and rhythm (§3.3) */
  --space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-card:20px;--space-lg:24px;--space-xl:32px;
  --space-2xl:40px;--space-3xl:56px;--space-4xl:80px;
  --page-top:var(--space-lg);--section-gap:var(--space-2xl);
  /* layout (§3.4) */
  --content-max:1180px;--page-gutter:20px;--column-gap:56px;--main-max:760px;--aside-w:360px;--aside-w-wide:400px;
  --rail-w:200px;--aside-w-article:280px;--reading-max:640px;--text-max:680px;--hero-copy-max:480px;--tabbar-h:var(--nav-h);
  /* Readings' filter rail and the privacy notice's "On this page" (PAGE-SPECS §8, §15); the purchase action bar's height */
  --aside-w-rail:240px;--actionbar-h:112px;
  /* shape (§3.5) */
  --radius-card:16px;--radius-control:12px;--radius-tile:10px;--radius-pill:999px;
  /* the Mission 8 name of the frame, still used by the legacy layer */
  --shell:var(--content-max);
}
/* breakpoints (§3.6): phone <768 · tablet 768–1119 · desktop ≥1120 (· wide ≥1440: no layout change); 370: small phones */
@media (max-width:370px){:root{--gutter:16px;--page-gutter:16px;--t-h1:30px;--t-h2:24px;--type-display:30px}}
@media (min-width:768px){:root{
  --gutter:32px;--page-gutter:32px;--header-h:64px;--content:680px;--t-h1:46px;--t-h2:30px;
  --type-display:46px;--type-h1:34px;--type-h2:26px;--type-h3:20px;--type-lead:18px;--type-reading:18px;
  --page-top:var(--space-xl);--space-card:24px}}
@media (min-width:1120px){:root{
  --content:760px;--t-h2:32px;
  --type-display:52px;--type-h1:40px;--type-h2:28px;
  --page-top:48px;--section-gap:var(--space-3xl)}}
}