/* Cleo beta design tokens (design system v2, "Bone & Oxblood"). Source: design/beta/tokens.css, shipped byte-for-byte as
   beta/assets/tokens.css by design/beta/tools/skins.py. Rules and rationale: design/beta/TOKENS-NOTES.md and
   design/beta/style/v2/DECISION.md. */

:root {
  /* ---- Ground, surfaces & ink (light) ---- */
  --paper:        #F9F7F3;
  --surface:      #FFFFFF;
  --sand:         #F1EDE7;
  --ink:          #1C1917;
  --ink-2:        #4A4440;
  --ink-3:        #68615B;
  --line:         #E7E2DB;
  --line-strong:  #CCC5BC;
  --scrim:        rgba(28, 25, 23, .40);

  /* ---- The one accent (oxblood) — rare by rule ---- */
  --accent:       #7A2A2A;
  --accent-ink:   #7A2A2A;
  --accent-wash:  #F5EAE7;
  --on-accent:    #FFFFFF;

  /* ---- The sun highlight — sticker badges + heart pop ring only ---- */
  --sun:          #E9A93B;
  --sun-wash:     #FBEBC8;
  --on-sun-wash:  #3D2A06;

  /* ---- State (never decoration) ---- */
  --open:         #2E6A4C;
  --open-soft:    #E5F0E9;
  --closed:       #8E3B2E;
  --closed-soft:  #F6E7E2;
  --warn:         #835800;
  --warn-soft:    #F8EFD9;
  --focus:        var(--ink);

  /* ---- Map ---- */
  --area-mute:    #948B83;
  --area-mix:     50%;
  /* map figures (O-75, design/beta/MAP-SHAPE.md §2; P-M10) */
  --map-land:#F1EDE7; --map-water:#CAD5DC; --map-park:#E0E6D6; --map-road:#FFFFFF; --map-rail:#B9B1A7; --map-pin-ring:#4A4440; --map-pin-closed:#68615B;

  /* ---- R6 names, aliased onto v2 (the retirement happens here) ---- */
  --night:        var(--paper);
  --night-2:      var(--sand);
  --on-night:     var(--ink);
  --on-night-2:   var(--ink-2);
  --star:         transparent;
  --gilt:         var(--ink);
  --gilt-soft:    var(--sand);
  --city:         var(--accent);
  --city-ink:     var(--accent-ink);
  --city-wash:    var(--accent-wash);
  --city-on:      var(--on-accent);
  --city-2:       var(--line-strong);
  --motif:        none;
  --motif-ink:    none;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                  "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "IPAGothic", sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                  "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "IPAGothic", sans-serif;
  --font-native:  "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "IPAGothic", sans-serif;

  --fs-hero: 38px;  --lh-hero: 1.06;
  --fs-d1:   34px;  --lh-d1:   1.08;
  --fs-d2:   24px;  --lh-d2:   1.2;
  --fs-d3:   16px;  --lh-d3:   1.3;
  --fs-lead: 17px;  --lh-lead: 1.5;
  --fs-body: 16px;  --lh-body: 1.55;
  --fs-sm:   14px;  --lh-sm:   1.45;
  --fs-xs:   12px;  --lh-xs:   1.35;
  --fs-meta: 13px;
  --fs-ui:   14px;
  --fs-brand: 22px;
  --fw-ui: 400; --fw-ui-strong: 600; --fw-display: 600;
  --track-hero: -.035em;
  --track-display: -.024em;
  --track-tight: -.01em;
  --track-eyebrow: .04em;
  --track-vert: .12em;
  /* ---- Rings and underlines ---- */
  --ring-pressed: inset 0 0 0 1px var(--ink);
  --ring-quiet: inset 0 0 0 1px var(--line-strong);
  --ring-select: 0 0 0 2px var(--city);
  --ring-select-halo: 0 0 0 2px var(--paper), 0 0 0 4px var(--city);
  --ring-glow: 0 0 0 2px var(--city), 0 0 0 6px color-mix(in srgb, var(--city) 22%, transparent);
  --ring-sun: 0 0 0 2px var(--sun-wash);
  --ring-focus-soft: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
  --ring-surface: 0 0 0 4px var(--surface);
  --pulse-from: 0 0 0 0 color-mix(in srgb, var(--city) 55%, transparent);
  --pulse-to: 0 0 0 14px transparent;
  --underline-quiet: inset 0 -5px 0 var(--line-strong);
  --underline-active: inset 0 -2px 0 var(--ink);
  --hairline-below: 0 1px 0 var(--line);
  /* ---- No-photo covers ---- */
  --cover-food: color-mix(in srgb, var(--sun) 7%, var(--sand));
  --cover-sight: var(--sand);
  --num: lining-nums tabular-nums;
  --icon-stroke: 1.5;

  /* ---- Space (4-pt) ---- */
  --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; --s-10: 72px; --s-11: 96px;
  --gutter: 16px;
  --maxw: 1360px;

  /* ---- Radius ---- */
  --r-xxs: 2px; --r-xs: 6px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-pill: 999px;
  --radius-sm: var(--r-s);  --radius: var(--r-m);  --radius-lg: var(--r-l);

  /* ---- Fixed colours ---- */
  --mask:            #000;
  --on-photo:        #fff;
  --scrim-photo:     rgba(0, 0, 0, .65);
  --shade-text:      rgba(0, 0, 0, .55);
  --shade-text-strong: rgba(0, 0, 0, .7);
  --on-night-hover:  rgba(255, 255, 255, .1);
  --on-night-line:   rgba(255, 255, 255, .12);
  --star:            #F5EEDF;
  --city-glow:       #C8574F;
  --print-ink:       #000;
  --print-paper:     #fff;
  --print-rule:      #ccc;

  /* ---- Elevation: soft and rare. Resting cards: none. ---- */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
  --shadow:    0 1px 2px rgba(28, 25, 23, .04), 0 6px 18px rgba(28, 25, 23, .07);
  --shadow-lg: 0 8px 28px rgba(28, 25, 23, .12), 0 1px 3px rgba(28, 25, 23, .06);
  --e-0: none;
  --e-1: none;
  --e-2: var(--shadow);
  --e-3: 0 -8px 28px rgba(28, 25, 23, .12);
  --e-4: var(--shadow-lg);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus);

  /* ---- Motion ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-4: 480ms;
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-grow: 300ms;
  --ease-grow: cubic-bezier(.2, .9, .1, 1);
  --dur-pop: 300ms;

  /* ---- Sizing ---- */
  --tap: 44px;
  --bar-h: 64px;
  --tab-h: 64px;

  /* ---- Charts ---- */
  --series-1:#3D78B2; --series-2:#A85E36; --series-3:#008977; --series-4:#976B15; --series-5:#985B93; --series-6:#4F8444;
  --series-other:#8C847C; --chart-grid:#E7E2DB; --chart-gap:#FFFFFF;

  color-scheme: light;
}

@media (min-width: 900px) {
  :root {
    --fs-hero: 60px; --fs-d1: 52px; --fs-d2: 28px; --fs-d3: 16px; --fs-lead: 18px;
    --gutter: 40px; --bar-h: 72px;
  }
}

/* ---------------- Dark edition: warm near-black, not navy ----------------
   Applied by OS preference unless the page pins data-theme="light"; data-theme="dark" forces it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#131110; --surface:#1C1918; --sand:#262220; --ink:#F2EEEA; --ink-2:#D0C9C3; --ink-3:#A69E97;
    --line:#302B28; --line-strong:#4B4440; --scrim:rgba(0,0,0,.6);
    --accent:#E0A19A; --accent-ink:#E8B0A9; --accent-wash:#33201E; --on-accent:#1E0E0C; --sun:#F0BC5E; --sun-wash:#3B2C10; --on-sun-wash:#FBE3B0;
    --open:#86C9A3; --open-soft:#1C3026; --closed:#F0A08C; --closed-soft:#3A221C; --warn:#EDC06A; --warn-soft:#382C12;
    --area-mute:#766D67;
    --map-land:#2B2725; --map-water:#111518; --map-park:#2A3128; --map-road:#45403C; --map-rail:#5A534D; --map-pin-ring:#D0C9C3; --map-pin-closed:#A69E97;
    --series-1:#5B97D3; --series-2:#C97C54; --series-3:#29A895; --series-4:#B7893B; --series-5:#B879B2; --series-6:#6DA361; --series-other:#8A827A; --chart-grid:#302B28; --chart-gap:#1C1918;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35); --shadow-lg: 0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); --e-3: 0 -8px 28px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#131110; --surface:#1C1918; --sand:#262220; --ink:#F2EEEA; --ink-2:#D0C9C3; --ink-3:#A69E97;
  --line:#302B28; --line-strong:#4B4440; --scrim:rgba(0,0,0,.6);
  --accent:#E0A19A; --accent-ink:#E8B0A9; --accent-wash:#33201E; --on-accent:#1E0E0C; --sun:#F0BC5E; --sun-wash:#3B2C10; --on-sun-wash:#FBE3B0;
  --open:#86C9A3; --open-soft:#1C3026; --closed:#F0A08C; --closed-soft:#3A221C; --warn:#EDC06A; --warn-soft:#382C12;
  --area-mute:#766D67;
  --map-land:#2B2725; --map-water:#111518; --map-park:#2A3128; --map-road:#45403C; --map-rail:#5A534D; --map-pin-ring:#D0C9C3; --map-pin-closed:#A69E97;
  --series-1:#5B97D3; --series-2:#C97C54; --series-3:#29A895; --series-4:#B7893B; --series-5:#B879B2; --series-6:#6DA361; --series-other:#8A827A; --chart-grid:#302B28; --chart-gap:#1C1918;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35); --shadow-lg: 0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); --e-3: 0 -8px 28px rgba(0,0,0,.5);
  color-scheme: dark;
}
/* ---------------- City skins (generated by design/beta/tools/skins.py from skins.json — do not hand-edit) ----------------
   Retired in design system v2 (W7): one accent site-wide, no per-city skin. data-city / data-page / .skin-* stay as hooks. */
/* ---------------- end city skins ---------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-grow: 0ms; --dur-pop: 0ms; }
}

:lang(ja),:lang(zh),:lang(ko){--lh-hero:1.3;--lh-d1:1.3;--lh-d2:1.35;--lh-d3:1.45;--lh-lead:1.65;--lh-body:1.7;--lh-sm:1.6;--lh-xs:1.5}