/* ============================================================
   本八幡RECON design tokens
   Single source of truth for colour, type, spacing, motion.

   Identity: a sunrise over the Pacific off the Boso Peninsula —
   Sunrise-over-the-Edogawa palette: warm accent on a deep
   sea-navy surfaces, a coral-to-gold dawn gradient, pine green
   for the "you got it" answer. Dark-first; light mode is a
   real, warm daylight variant — not a afterthought.
   ============================================================ */
:root {
  color-scheme: dark;

  /* --- brand / semantic accents ---
     Guess pin + primary action stay coral (#ff4d6d) and answer
     stays pine (#25c274) so they match the map markers drawn in JS. */
  --c-accent:          #ff6f9f;   /* guess pin / primary action — soft rose */
  --c-accent-press:    #ec5688;
  --c-accent-hi:       #ff8fb3;
  --c-accent-soft:     rgba(255, 111, 159, 0.16);
  --c-accent-ring:     rgba(255, 111, 159, 0.32);

  --c-good:            #3ccf9a;   /* answer pin / high score — soft mint */
  --c-good-press:      #2fb686;
  --c-good-soft:       rgba(60, 207, 154, 0.16);

  --c-warn:            #f7c15b;
  --c-warn-soft:       rgba(247, 193, 91, 0.18);

  --c-sun:             #ffc078;   /* sunrise mid-tone */

  /* Focus ring — soft lilac, reads on rose / mint / both ramps. */
  --c-focus:           #b98cff;
  --focus-ring:        0 0 0 3px var(--c-focus), 0 0 0 5px color-mix(in srgb, var(--c-focus) 30%, transparent);

  /* Signature gradients — pink to peach to butter */
  --grad-sunrise: linear-gradient(120deg, #ff6f9f 0%, #ff9d8a 45%, #ffcf8f 100%);
  --grad-sunrise-soft: linear-gradient(120deg, rgba(255,111,159,0.18), rgba(255,207,143,0.14));
  --grad-primary: linear-gradient(180deg, #ff86ac 0%, var(--c-accent) 55%, var(--c-accent-press) 100%);
  /* Sunrise gradient tuned for clipped display text — bright on dark surfaces */
  --grad-sunrise-text: linear-gradient(120deg, #ff86ac 0%, #ff9f7e 46%, #ffd27a 100%);

  /* --- dark surface ramp (default) — cosy warm plum-navy --- */
  --c-bg:             #14101c;
  --c-bg-1:           #1a1524;
  --c-surface:        #221a2f;
  --c-surface-2:      #2c233b;
  --c-surface-3:      #372c48;
  --c-line:           rgba(255, 255, 255, 0.09);
  --c-line-strong:    rgba(255, 255, 255, 0.16);

  --c-text:           #f4eef7;
  --c-text-soft:      #c3b6cd;
  --c-text-faint:     #8d7f9a;
  --c-on-accent:      #ffffff;

  /* Scrims for HUD / overlays over live imagery */
  --scrim-top:        linear-gradient(180deg, rgba(4,7,12,0.72) 0%, rgba(4,7,12,0.32) 55%, transparent 100%);
  --scrim-panel:      rgba(8, 12, 19, 0.62);
  --scrim-glass:      rgba(12, 18, 27, 0.55);
  --scrim-overlay:    rgba(6, 10, 16, 0.66);

  /* Backdrop wash behind centred screens */
  --wash: radial-gradient(1100px 620px at 78% -12%, rgba(255,143,179,0.18), transparent 60%),
          radial-gradient(900px 560px at 12% 108%, rgba(185,140,255,0.12), transparent 62%),
          linear-gradient(180deg, var(--c-bg-1), var(--c-bg) 70%);

  /* --- typography --- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.25rem;
  --fs-5xl:  4.25rem;

  --lh-tight:   1.08;
  --lh-snug:    1.28;
  --lh-normal:  1.55;

  --tr-tight:   -0.02em;
  --tr-tighter: -0.035em;
  --tr-display: -0.045em;
  --tr-wide:    0.08em;
  --tr-wider:   0.14em;

  /* --- spacing / radius / shadow --- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  --r-sm: 10px;  --r-md: 18px;  --r-lg: 24px;  --r-xl: 34px;  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(30,10,25,0.32);
  --shadow-2: 0 12px 32px rgba(30,10,25,0.34);
  --shadow-3: 0 30px 74px rgba(30,10,25,0.46);
  --shadow-accent: 0 12px 30px -8px rgba(255,111,159,0.42);

  /* --- motion --- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  /* --- layout rails --- */
  --hud-h:    64px;
  --topbar-h: 56px;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --safe-l: env(safe-area-inset-left);
  --safe-r: env(safe-area-inset-right);
}

/* ------------------------------------------------------------
   Light mode — a warm coastal daylight, not washed-out grey.
   The in-game panorama stays dark regardless; this is for the
   menu / setup / summary / loading / error surfaces.
   Applied both by system preference and by an explicit
   data-theme="light" override.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --c-bg:           #fdf3f6;
    --c-bg-1:         #fbf0ec;
    --c-surface:      #ffffff;
    --c-surface-2:    #fbeef2;
    --c-surface-3:    #f6e3ea;
    --c-line:         rgba(120, 60, 90, 0.10);
    --c-line-strong:  rgba(120, 60, 90, 0.18);

    --c-text:         #3a2233;
    --c-text-soft:    #7a5566;
    --c-text-faint:   #a98a99;

    --c-accent-soft:  rgba(255, 111, 159, 0.14);
    --c-good-soft:    rgba(60, 207, 154, 0.16);
    --c-warn-soft:    rgba(247, 193, 91, 0.20);

    --c-focus:        #9a6ae0;
    --focus-ring:     0 0 0 3px #ffffff, 0 0 0 6px var(--c-focus);

    --grad-sunrise-soft: linear-gradient(120deg, rgba(255,111,159,0.16), rgba(255,207,143,0.18));
    --grad-sunrise-text: linear-gradient(120deg, #e85f8f 0%, #e07a56 50%, #c98a3a 100%);

    --scrim-panel:    rgba(255, 250, 252, 0.80);
    --scrim-glass:    rgba(255, 250, 252, 0.66);

    --wash: radial-gradient(1100px 640px at 80% -14%, rgba(255,158,190,0.28), transparent 58%),
            radial-gradient(880px 540px at 8% 112%, rgba(185,140,255,0.14), transparent 60%),
            linear-gradient(180deg, #fef6f3, var(--c-bg) 68%);

    --shadow-1: 0 1px 2px rgba(120,60,90,0.10);
    --shadow-2: 0 12px 32px rgba(120,60,90,0.13);
    --shadow-3: 0 30px 74px rgba(120,60,90,0.18);
    --shadow-accent: 0 12px 30px -8px rgba(255,111,159,0.38);
  }
}

/* Manual override wins in both directions */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg:           #fdf3f6;
  --c-bg-1:         #fbf0ec;
  --c-surface:      #ffffff;
  --c-surface-2:    #fbeef2;
  --c-surface-3:    #f6e3ea;
  --c-line:         rgba(120, 60, 90, 0.10);
  --c-line-strong:  rgba(120, 60, 90, 0.18);

  --c-text:         #3a2233;
  --c-text-soft:    #7a5566;
  --c-text-faint:   #a98a99;

  --c-accent-soft:  rgba(255, 111, 159, 0.14);
  --c-good-soft:    rgba(60, 207, 154, 0.16);
  --c-warn-soft:    rgba(247, 193, 91, 0.20);

  --c-focus:        #9a6ae0;
  --focus-ring:     0 0 0 3px #ffffff, 0 0 0 6px var(--c-focus);

  --grad-sunrise-soft: linear-gradient(120deg, rgba(255,111,159,0.16), rgba(255,207,143,0.18));
  --grad-sunrise-text: linear-gradient(120deg, #e85f8f 0%, #e07a56 50%, #c98a3a 100%);

  --scrim-panel:    rgba(255, 250, 252, 0.80);
  --scrim-glass:    rgba(255, 250, 252, 0.66);

  --wash: radial-gradient(1100px 640px at 80% -14%, rgba(255,158,190,0.28), transparent 58%),
          radial-gradient(880px 540px at 8% 112%, rgba(185,140,255,0.14), transparent 60%),
          linear-gradient(180deg, #fef6f3, var(--c-bg) 68%);

  --shadow-1: 0 1px 2px rgba(120,60,90,0.10);
  --shadow-2: 0 12px 32px rgba(120,60,90,0.13);
  --shadow-3: 0 30px 74px rgba(120,60,90,0.18);
  --shadow-accent: 0 12px 30px -8px rgba(255,111,159,0.38);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}