/* ============================================================
   Leemon — Layout constraint + colour tokens (single source of truth)
   Loaded on every page via SiteHeader. The site's ENFORCED layout
   tokens: the responsive page gutter + the content-width caps.
   Every page's outer container uses these — do not hardcode px.
     padding: 0 var(--lm-gutter);
     max-width: var(--lm-w-default);   (choices: -form / -narrow / -full)

   BOX MODEL per tier (2026-10-19, V16-A70)
     default : CONTENT width. Outer box = token + 2 × gutter
               (box-sizing: content-box). Content edge aligns with the
               SiteHeader logo and SiteFooter. Pages under a global
               "* { box-sizing: border-box }" must set content-box on
               this container explicitly.
     form / narrow / full : OUTER box INCLUDES the gutter
               (box-sizing: border-box). Desktop content = token − 80
               (form 440 / narrow 880 / full 1600).
     Account rail ([data-acct-rail], マイページ系): stays its own
               1200px CONTENT width, min(1200px, 100% − 2 × gutter);
               not one of the four tiers — a narrower rail for the
               side-nav + panel layout. Not re-aligned to the logo.
   Component spacing (gaps, card padding, icon & button sizes) is
   intentionally bespoke per component and is NOT tokenised here.
   ============================================================

   GUTTER BREAKPOINTS
     Mobile   : ≤ 600px      → 16px
     Tablet   : 601 – 1024px → 32px
     Desktop  : ≥ 1025px     → 40px   (widths cap the content beyond)
*/

:root {
  /* -- Mobile (default, ≤600px) ------------------------------ */

  /* 边距 — page side gutter (the only responsive layout token) */
  --lm-gutter: 16px;

  /* 宽度 — content column caps (single source of truth for the whole site).
     Every page's outer container picks ONE of these. Do not hardcode px.
       form    : sign-in / sign-up / verify / status single column.
       narrow  : focused single-column & long-form reading.
       default : full rail — edges align with the header / footer.
       full    : 全页面宽度 — wide / full-bleed bands (galleries, hero,
                 wide tables). Full-bleed up to 1680, gently capped beyond. */
  --lm-w-form:     520px;   /* auth / verify / status single column       */
  --lm-w-narrow:   960px;   /* forms, status, legal & long-form reading   */
  --lm-w-default: 1360px;   /* header-aligned rail — standard pages       */
  --lm-w-full:    1680px;   /* full-page width — wide / full-bleed bands  */
}

/* -- Tablet (601–1024px) ------------------------------------- */
@media (min-width: 601px) {
  :root { --lm-gutter: 32px; }
}

/* -- Desktop (≥1025px) --------------------------------------- */
@media (min-width: 1025px) {
  :root { --lm-gutter: 40px; }
}

/* ============================================================
   COLOUR — two layers (2026-10-11)
   1. PALETTE  --lm-p-*  raw hexes, named by colour. Change a
      brand colour here once; every role pointing at it follows.
   2. ROLES    --lm-c-*  what pages use. Each role points at a
      palette entry. Switching palette = re-pointing roles.
   Pages never use --lm-p-* directly.
   ============================================================ */
:root {
  /* palette: v6 (default) */
  --lm-p-cocoa:          #30261e;   /* text, headings, footer          */
  --lm-p-oat:            #f6f3eb;   /* soft panel / hover / on-dark    */
  --lm-p-brand-orange:   #ff6600;   /* brand board 2026-10-16: logo, CTA, top line */
  --lm-p-persimmon:      #d95300;   /* accent until 2026-10-16 (now brand-orange) */
  --lm-p-persimmon-text: #a34710;   /* small accent text, links        */
  --lm-p-persimmon-ink:  #7a330a;   /* link hover                      */

  /* palette: classic (paper / sumi / brass / signal yellow) */
  --lm-p-paper:        #f5efe2;
  --lm-p-paper-deep:   #ede4d2;
  --lm-p-paper-card:   #fffdf7;
  --lm-p-sumi:         #221f18;
  --lm-p-brass:        #b1873f;
  --lm-p-brass-deep:   #8f6a2f;
  --lm-p-yellow:       #ffd23d;

  /* palette: v3 (16-3) */
  --lm-p-plum:         #230108;   /* titles, primary button, dark band, footer */
  --lm-p-plum-deep:    #120004;   /* * hover on plum                        */
  --lm-p-orange:       #F26A00;   /* top line, logo dot, CTA on plum — never small text on light (2.94:1) */
  --lm-p-orange-deep:  #bd5300;   /* orange small text on warm white (4.56:1) */
  --lm-p-orange-ink:   #9a4300;   /* * link hover (6.32:1)                  */
  --lm-p-warm-white:   #FFF9F2;
  --lm-p-white:        #ffffff;
  --lm-p-ink:          #1f1d1c;   /* neutral body ink                       */

  --lm-p-crimson:      #C8102E;   /* v3 sale — 5.6:1 on warm white, clearly apart from orange */
  --lm-p-sand:         #F1E6DA;   /* v3 placeholder ground   */
  --lm-p-sand-soft:    #F5ECE2;   /* v3 soft fill            */
  --lm-p-sand-line:    #EADBCB;   /* v3 warm line            */
  --lm-p-sand-deep:    #C9B5A2;   /* v3 deep warm line       */

  /* palette: current, secondary */
  --lm-p-sale-red:     #c8401d;
  --lm-p-parchment:    #e8ddc6;   /* placeholder ground      */
  --lm-p-parchment-soft:#ece4cf;  /* soft fill               */
  --lm-p-parchment-line:#e0d0ad;  /* warm line               */
  --lm-p-parchment-deep:#c2b393;  /* deep warm line          */

  /* palette: shared (both palettes) */
  --lm-p-sage:         #dfe5da;   /* cool placeholder        */
  --lm-p-rust:         #a5402c;   /* error                   */
  --lm-p-rust-bg:      #fdf4f0;
  --lm-p-rust-soft:    #f6e3dc;
  --lm-p-moss:         #5d7a2a;   /* success / live          */
  --lm-p-moss-bg:      #e7eed3;
  --lm-p-ochre:        #b88b00;   /* coming soon             */
  --lm-p-ochre-bg:     #fff6b8;
}

/* ============================================================
   COLOUR — role tokens (2026-10-10)
   Pages reference roles, never palette hexes:
     background: var(--lm-c-strong);  color: var(--lm-c-on-strong);
     color: rgba(var(--lm-c-ink-rgb), .62);   (opacity steps of ink)
   SVG colours go in style="stroke: var(--lm-c-…)" — not in the
   stroke="" attribute.
   Default = v6 palette (white / cocoa / persimmon), from Homepage v6.
   2026-10-16: v6 accent / brass = brand orange #ff6600 (same as the
   logo); text on it is cocoa (white is only 2.94:1). Small accent
   text stays persimmon-text #a34710 — brand orange is 2.94:1 on white.
   [data-palette="classic"] = previous paper / sumi / brass / yellow.
   [data-palette="v3"] = Plum / Orange / Warm White — UNDER REVIEW
   (16-3). Switch with ?palette=v3 or SiteHeader palette="v3".
   Text tones (body / muted / faint) and line-strong are roles too
   (2026-10-14, from Leemon v16) — don't write those browns as hex.
   Status (error / ok / soon), placeholder art and warm lines are
   roles too. Only third-party brand colours (LINE green) and pure
   black/white scrims stay literal.
   ============================================================ */
:root {
  /* palette v6 (2026-10-12) — taken from Leemon Homepage v6:
     white ground, warm brown ink, orange accent. */
  /* surfaces */
  --lm-c-bg:          var(--lm-p-white);
  --lm-c-bg-rgb:      255,255,255;
  --lm-c-bg-alt:      var(--lm-p-oat);        /* alternate band       */
  --lm-c-card:        var(--lm-p-white);
  --lm-c-card-rgb:    255,255,255;
  --lm-c-inset:       #faf7f2;   /* inset panel                          */
  --lm-c-input:       #faf7f2;   /* input / quiet row                    */
  --lm-c-hover:       var(--lm-p-oat);

  /* ink */
  --lm-c-ink:         var(--lm-p-cocoa);
  --lm-c-ink-rgb:     48,38,30;
  --lm-c-heading:     var(--lm-p-cocoa);
  --lm-c-strong:      var(--lm-p-cocoa);      /* primary button, dark band, footer */
  --lm-c-strong-hover:#1f1812;
  --lm-c-footer:      #222222;   /* site footer ground — brand ink (2026-10-18, V16-A61); not --lm-c-strong */
  --lm-c-on-strong:   var(--lm-p-oat);
  --lm-c-on-strong-hi:var(--lm-p-white);
  --lm-c-on-strong-rgb: 246,243,235;

  /* brand */
  --lm-c-accent:      var(--lm-p-brand-orange); /* CTA, top line, badge */
  --lm-c-accent-rgb:  255,102,0;
  --lm-c-accent-hover:#f25f00;   /* * cocoa text 4.51:1 */
  --lm-c-accent-tint: #fdf3ea;   /* pale selected ground (AI flow)       */
  --lm-c-on-accent:   var(--lm-p-cocoa);      /* 5.03:1 (white 2.94:1) */
  --lm-c-focus:       #e65c00;                /* focus outline (one step deeper than accent) */
  --lm-c-on-accent-muted: var(--lm-p-cocoa);  /* * */
  --lm-c-sale:        var(--lm-p-crimson);    /* kept apart from orange */
  --lm-c-sale-rgb:    200,16,46;
  --lm-c-on-sale:     var(--lm-p-white);
  --lm-c-accent-soft: #fcebdd;   /* selected row, soft chip              */
  --lm-c-brass:       var(--lm-p-brand-orange); /* decorative: logo dot, icons, borders */
  --lm-c-brass-rgb:   255,102,0;
  --lm-c-brass-text:  var(--lm-p-persimmon-text); /* eyebrow, link, small accent text (5.9:1) */
  --lm-c-brass-deep:  var(--lm-p-persimmon-ink);  /* link hover, chip text */
  --lm-c-brass-soft:  #fcebdd;   /* tinted pill ground                   */
  --lm-c-brass-tint:  #fdf5ee;   /* pale tinted ground                   */
  --lm-c-brass-line-rgb: 163,71,16;

  /* neutrals: placeholder art, warm lines */
  --lm-c-ph:          var(--lm-p-oat);
  --lm-c-ph-rgb:      246,243,235;
  --lm-c-ph-soft:     #faf7f2;
  --lm-c-ph-cool:     var(--lm-p-sage);
  --lm-c-line-warm:   #eee4d9;   /* warm divider / dashed                */
  --lm-c-line-deep:   #c4b3a0;   /* deep warm line / icon                */

  /* text tones + strong line (2026-10-14) — taken from Leemon v16,
     which used these literals throughout. Ink stays the main text. */
  --lm-c-body:        #514132;   /* secondary body copy, labels          */
  --lm-c-muted:       #6f5d4c;   /* notes, lead text                     */
  --lm-c-faint:       #7a6a5a;   /* captions, dates, placeholders — 5.20:1 white, 4.69:1 oat (2026-10-17, was #8a7968) */
  --lm-c-line-strong: #d9cbbb;   /* input / secondary-button border      */

  /* status — same in every palette */
  --lm-c-error:       var(--lm-p-rust);
  --lm-c-error-rgb:   165,64,44;
  --lm-c-error-bg:    var(--lm-p-rust-bg);
  --lm-c-error-soft:  var(--lm-p-rust-soft);
  --lm-c-ok:          var(--lm-p-moss);
  --lm-c-ok-rgb:      93,122,42;
  --lm-c-ok-bg:       var(--lm-p-moss-bg);
  --lm-c-soon:        var(--lm-p-ochre);
  --lm-c-soon-rgb:    184,139,0;
  --lm-c-soon-bg:     var(--lm-p-ochre-bg);
}

/* classic palette (paper / sumi / brass / signal yellow) — previous
   default, kept for comparison: ?palette=classic */
:root[data-palette="classic"] {
  /* surfaces */
  --lm-c-bg:          var(--lm-p-paper);      /* page ground          */
  --lm-c-bg-rgb:      245,239,226;
  --lm-c-bg-alt:      var(--lm-p-paper-deep); /* alternate band       */
  --lm-c-card:        var(--lm-p-paper-card); /* card / raised surface */
  --lm-c-card-rgb:    255,253,247;
  --lm-c-inset:       #fbf8ee;   /* inset panel                          */
  --lm-c-input:       #faf7ed;   /* input / quiet row                    */
  --lm-c-hover:       #f3ecda;   /* hover ground                         */

  /* ink */
  --lm-c-ink:         var(--lm-p-sumi);       /* text, lines, icons   */
  --lm-c-ink-rgb:     34,31,24;  /* rgba(var(--lm-c-ink-rgb), .74) etc.  */
  --lm-c-heading:     var(--lm-p-sumi);       /* hero / section titles (plum in v3) */
  --lm-c-strong:      var(--lm-p-sumi);       /* primary button, dark band, footer */
  --lm-c-strong-hover:#000000;   /* hover on strong                      */
  --lm-c-on-strong:   var(--lm-p-paper);      /* text on strong       */
  --lm-c-on-strong-hi:var(--lm-p-paper-card); /* bright text on strong */
  --lm-c-on-strong-rgb: 245,239,226;

  /* brand */
  --lm-c-accent:      var(--lm-p-yellow);     /* top line, badge, CTA on dark */
  --lm-c-accent-rgb:  255,210,61;
  --lm-c-accent-tint: #fef7cf;   /* pale selected ground (AI flow)       */
  --lm-c-on-accent:   var(--lm-p-sumi);       /* text on accent       */
  --lm-c-focus:       var(--lm-c-accent);
  --lm-c-on-accent-muted: var(--lm-p-brass-deep); /* secondary text on accent */
  --lm-c-sale:        var(--lm-p-sale-red);   /* sale price, sale badge */
  --lm-c-sale-rgb:    200,64,29;
  --lm-c-on-sale:     var(--lm-p-yellow);     /* text on sale red     */
  --lm-c-accent-soft: #fff6b8;   /* selected row, soft chip              */
  --lm-c-brass:       var(--lm-p-brass);      /* decorative: logo dot, icons, borders */
  --lm-c-brass-rgb:   177,135,63;
  --lm-c-brass-text:  var(--lm-p-brass);      /* eyebrow, link, small accent text */
  --lm-c-brass-deep:  var(--lm-p-brass-deep); /* link hover, chip text */
  --lm-c-brass-soft:  #fbf1cf;   /* brass-tinted pill ground             */
  --lm-c-brass-tint:  #fdf6dd;   /* pale brass ground                    */
  --lm-c-brass-line-rgb: 184,135,63; /* brass-tinted borders            */

  /* neutrals: placeholder art, warm lines */
  --lm-c-ph:          var(--lm-p-parchment);      /* image placeholder ground */
  --lm-c-ph-rgb:      232,221,198;
  --lm-c-ph-soft:     var(--lm-p-parchment-soft); /* soft fill, skeleton      */
  --lm-c-ph-cool:     var(--lm-p-sage);
  --lm-c-line-warm:   var(--lm-p-parchment-line); /* warm divider / dashed    */
  --lm-c-line-deep:   var(--lm-p-parchment-deep); /* deep warm line / icon    */

  /* text tones + strong line — * body is derived (ink 87% on paper) */
  --lm-c-body:        #3d3a32;   /* * */
  --lm-c-muted:       #6f6a5f;
  --lm-c-faint:       #716a5c;   /* 4.68:1 paper, 5.27:1 card (was #9a9384) */
  --lm-c-line-strong: #d8d2bd;
}


/* v3 palette (16-3, under review). Values marked * are derived —
   the v3 draft does not define them. */
:root[data-palette="v3"] {
  --lm-c-bg:          var(--lm-p-warm-white);
  --lm-c-bg-rgb:      255,249,242;
  --lm-c-bg-alt:      var(--lm-p-white);
  --lm-c-card:        var(--lm-p-white);
  --lm-c-card-rgb:    255,255,255;
  --lm-c-inset:       #FFFCF8;   /* * */
  --lm-c-input:       #FFFCF8;   /* * */
  --lm-c-hover:       #FBEFE3;   /* * */

  --lm-c-ink:         var(--lm-p-ink);
  --lm-c-ink-rgb:     31,29,28;
  --lm-c-heading:     var(--lm-p-plum);
  --lm-c-strong:      var(--lm-p-plum);
  --lm-c-strong-hover:var(--lm-p-plum-deep);
  --lm-c-on-strong:   var(--lm-p-warm-white);   /* 18.61:1 */
  --lm-c-on-strong-hi:var(--lm-p-white);
  --lm-c-on-strong-rgb: 255,249,242;

  --lm-c-accent:      var(--lm-p-orange);
  --lm-c-accent-rgb:  242,106,0;
  --lm-c-accent-tint: #FFF1E4;   /* * */
  --lm-c-on-accent:   var(--lm-p-plum);         /* 6.33:1 */
  --lm-c-focus:       var(--lm-c-accent);
  --lm-c-on-accent-muted: var(--lm-p-plum);     /* * */
  --lm-c-on-sale:     var(--lm-p-white);        /* * orange on sale red is unreadable */
  --lm-c-accent-soft: #FFE8D3;   /* * */
  --lm-c-brass:       var(--lm-p-orange);
  --lm-c-brass-rgb:   242,106,0;
  --lm-c-brass-text:  var(--lm-p-orange-deep);  /* 4.56:1 on warm white */
  --lm-c-brass-deep:  var(--lm-p-orange-ink);
  --lm-c-brass-soft:  #FDEBDD;   /* * */
  --lm-c-brass-tint:  #FDF0E6;   /* * */
  --lm-c-brass-line-rgb: 189,83,0;

  --lm-c-sale:        var(--lm-p-crimson);
  --lm-c-sale-rgb:    200,16,46;
  --lm-c-ph:          var(--lm-p-sand);
  --lm-c-ph-rgb:      241,230,218;
  --lm-c-ph-soft:     var(--lm-p-sand-soft);
  --lm-c-line-warm:   var(--lm-p-sand-line);
  --lm-c-line-deep:   var(--lm-p-sand-deep);

  --lm-c-body:        #3c3a38;   /* * ink 87% on warm white */
  --lm-c-muted:       #6f6a5f;   /* * */
  --lm-c-faint:       #716a5c;   /* * 5.13:1 warm white (was #9a9384) */
  --lm-c-line-strong: #DCC9B6;   /* * */
}