/* ===========================================================
   Tokyo Local Guide — design tokens (v74)
   Dark editorial vermilion. 東京-watermark identity.
   Fraunces display · Inter body · Mincho for kanji.
   ONLY this file holds raw hex — styles.css consumes var()s.
   =========================================================== */
:root {
  /* ---- Core surfaces (warm near-black, layered) ---- */
  --bg:            #14110E;   /* page */
  --surface-1:     #1B1612;   /* resting card / app-bar fill */
  --surface-2:     #221C17;   /* raised card / hero CTA fill */
  --surface-3:     #2C2520;   /* insets, chips, count pills */
  --border:        #2E2920;   /* hairline dividers */
  --border-strong: #463E33;   /* input borders / focus rest */

  /* ---- Surface aliases (theme-aware) — consumed by tlg77-elevate.css.
     Previously undefined → those components fell back to hardcoded light hex
     and broke dark mode (persona quiz, place rows, density, unlockbar). ---- */
  --paper:         var(--surface-1);  /* card / modal surface */
  --paper2:        var(--surface-2);  /* rows, quiz options, persona cards */
  --ink:           var(--text);       /* primary text on those surfaces */

  /* ---- Ink ---- */
  --text:          #F3ECE2;   /* primary cream */
  --text-muted:    #B8AE9E;   /* secondary (≈8:1 on surface-1/2) */
  --text-faint:    #8A8173;   /* tertiary captions only */

  /* ---- Vermilion (the verb: CTAs, active, watermark) ---- */
  --accent:        #C0322E;
  --accent-deep:   #7A1F1A;   /* hover, rules, pressed */
  --accent-2:      #E06B65;   /* vermilion as TEXT on dark */
  --accent-soft:   #2C1714;   /* soft tinted fills */
  --text-on-accent:#FFFFFF;   /* text on vermilion fills (max glare legibility) */

  /* ---- Trust + concierge accents (narrow use) ---- */
  --gold:          #C9A35A;   /* concierge-pick badge ONLY */
  --gold-ink:      #1B140A;   /* text on gold */
  --olive:         #7A8050;   /* verified / source / trust signals ONLY */
  --olive-2:       #A4AB78;   /* olive as text on dark */

  /* ---- Category hues (read by app.js for badges/affordances) ---- */
  --c-sushi:       #5B9BB3;
  --c-omakase:     #6E7BC0;
  --c-ramen:       #D07A3F;
  --c-meat:        #B07254;
  --c-yakitori:    #C98A4A;
  --c-tonkatsu:    #C9A35A;
  --c-tempura:     #D9B36B;
  --c-kaiseki:     #C98AA6;
  --c-fine-dining: #9A86C0;
  --c-soba:        #9BA86E;
  --c-unagi:       #B5895A;
  --c-curry:       #D08A3A;
  --c-okonomiyaki: #C08A5A;
  --c-monjayaki:   #A8744A;
  --c-izakaya:     #D08648;
  --c-bar:         #B57AC0;
  --c-club:        #C065A6;
  --c-family:      #E0975A;
  --c-tea:         #8FB07A;
  --c-sight:       #A48AD9;
  --c-shrine:      #D9554F;
  --c-experience:  #5FBFA8;
  --c-shopping:    #D973A6;

  /* ---- Shadows (warm-black tinted, one per surface) ---- */
  --shadow-1:      0 1px 2px rgba(0,0,0,0.45);
  --shadow-2:      0 10px 26px -8px rgba(0,0,0,0.55);
  --shadow-3:      0 22px 52px -12px rgba(0,0,0,0.7);
  --shadow-cta:    0 10px 26px -10px rgba(192,50,46,0.65);

  /* ---- Type ---- */
  --font-display:  "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-kanji:    "Hiragino Mincho ProN", "Yu Mincho", "Fraunces", serif;
  --fs-xs:  12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 17px;
  --fs-lg:  20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 42px;
  --lh-tight: 1.12; --lh-snug: 1.32; --lh-normal: 1.55;

  /* ---- Spacing ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Radii ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Layout ---- */
  --appbar-h: 64px; --appbar-h-mobile: 56px;
  --bottomnav-h: 60px; --container: 1280px; --edge: 32px;

  /* ---- Motion ---- */
  --t-fast: 120ms; --t-med: 220ms; --t-slow: 360ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --spring: cubic-bezier(.34,1.3,.5,1);
}

/* ===========================================================
   LIGHT MODE — daylight palette for outdoor / glare use.
   Toggled via <html data-theme="light">. Default = dark.
   =========================================================== */
:root[data-theme="light"] {
  --bg:            #F5EFE6;
  --surface-1:     #FFFFFF;
  --surface-2:     #FAF4EA;
  --surface-3:     #F1E8DA;
  --border:        #D9CFBE;
  --border-strong: #C2B49E;

  --text:          #1A1612;   /* ~13:1 on --bg */
  --text-muted:    #5A5048;   /* ~6.5:1 on --bg */
  --text-faint:    #6E6557;   /* ~4.6:1, captions only */

  --accent:        #C0322E;
  --accent-deep:   #962420;
  --accent-2:      #A82A26;   /* vermilion as TEXT on cream (~5.6:1) */
  --accent-soft:   #F6E2DD;
  --text-on-accent:#FFFFFF;

  --gold:          #8A6A2E;   /* darker gold for cream */
  --gold-ink:      #FFFFFF;
  --olive:         #5F6B3A;   /* darker olive for cream */
  --olive-2:       #59632F;

  --shadow-1:      0 1px 2px rgba(60,45,30,0.10);
  --shadow-2:      0 10px 26px -8px rgba(60,45,30,0.16);
  --shadow-3:      0 22px 52px -12px rgba(60,45,30,0.22);
  --shadow-cta:    0 10px 26px -10px rgba(192,50,46,0.40);
}

/* ===========================================================
   LARGER TEXT — one-tap bump for outdoor readability.
   Toggled via <html data-textsize="large">.
   =========================================================== */
:root[data-textsize="large"] {
  --fs-sm: 16px; --fs-base: 18px; --fs-md: 19px;
  --lh-normal: 1.65;
}