/* ============================================================
   本八幡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:          #ff4d6d;   /* guess pin / primary action */
  --c-accent-press:    #e83e5c;
  --c-accent-hi:       #ff6f88;
  --c-accent-soft:     rgba(255, 77, 109, 0.16);
  --c-accent-ring:     rgba(255, 77, 109, 0.30);

  --c-good:            #25c274;   /* answer pin / high score */
  --c-good-press:      #1ea866;
  --c-good-soft:       rgba(37, 194, 116, 0.16);

  --c-warn:            #f2b530;
  --c-warn-soft:       rgba(242, 181, 48, 0.16);

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

  /* Focus ring — deliberately its own hue so it reads on coral,
     pine and both surface ramps. */
  --c-focus:           #6bb8ff;
  --focus-ring:        0 0 0 3px var(--c-focus), 0 0 0 5px color-mix(in srgb, var(--c-focus) 30%, transparent);

  /* Signature gradients */
  --grad-sunrise: linear-gradient(120deg, #ff4d6d 0%, #ff7a56 42%, #f7b733 100%);
  --grad-sunrise-soft: linear-gradient(120deg, rgba(255,77,109,0.18), rgba(247,183,51,0.14));
  --grad-primary: linear-gradient(180deg, #ff5c79 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, #ff5c79 0%, #ff8a56 46%, #ffc24d 100%);

  /* --- dark surface ramp (default) — deep Pacific navy --- */
  --c-bg:             #080c13;
  --c-bg-1:           #0d131d;
  --c-surface:        #141d2a;
  --c-surface-2:      #1c2736;
  --c-surface-3:      #243244;
  --c-line:           rgba(255, 255, 255, 0.09);
  --c-line-strong:    rgba(255, 255, 255, 0.16);

  --c-text:           #eef2f7;
  --c-text-soft:      #aebacb;
  --c-text-faint:     #74839a;
  --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,122,86,0.16), transparent 60%),
          radial-gradient(900px 560px at 12% 108%, rgba(37,194,116,0.10), 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: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.38);
  --shadow-3: 0 28px 70px rgba(0,0,0,0.50);
  --shadow-accent: 0 10px 26px -6px rgba(255,77,109,0.45);

  /* --- 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:           #eef1f6;
    --c-bg-1:         #f6f4f0;
    --c-surface:      #ffffff;
    --c-surface-2:    #f1f4f8;
    --c-surface-3:    #e7ecf3;
    --c-line:         rgba(19, 32, 54, 0.10);
    --c-line-strong:  rgba(19, 32, 54, 0.18);

    --c-text:         #101a2c;
    --c-text-soft:    #46566d;
    --c-text-faint:   #6a7a90;

    --c-accent-soft:  rgba(255, 77, 109, 0.12);
    --c-good-soft:    rgba(37, 194, 116, 0.14);
    --c-warn-soft:    rgba(242, 181, 48, 0.18);

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

    --grad-sunrise-soft: linear-gradient(120deg, rgba(255,77,109,0.14), rgba(247,183,51,0.16));
    --grad-sunrise-text: linear-gradient(120deg, #e23a5e 0%, #d9531f 50%, #a86b00 100%);

    --scrim-panel:    rgba(255, 255, 255, 0.78);
    --scrim-glass:    rgba(255, 255, 255, 0.66);

    --wash: radial-gradient(1100px 640px at 80% -14%, rgba(255,138,86,0.22), transparent 58%),
            radial-gradient(880px 540px at 8% 112%, rgba(37,194,116,0.12), transparent 60%),
            linear-gradient(180deg, #f8f6f2, var(--c-bg) 68%);

    --shadow-1: 0 1px 2px rgba(19,32,54,0.10);
    --shadow-2: 0 10px 30px rgba(19,32,54,0.12);
    --shadow-3: 0 28px 70px rgba(19,32,54,0.18);
    --shadow-accent: 0 10px 26px -8px rgba(255,77,109,0.40);
  }
}

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

  --c-bg:           #eef1f6;
  --c-bg-1:         #f6f4f0;
  --c-surface:      #ffffff;
  --c-surface-2:    #f1f4f8;
  --c-surface-3:    #e7ecf3;
  --c-line:         rgba(19, 32, 54, 0.10);
  --c-line-strong:  rgba(19, 32, 54, 0.18);

  --c-text:         #101a2c;
  --c-text-soft:    #46566d;
  --c-text-faint:   #6a7a90;

  --c-accent-soft:  rgba(255, 77, 109, 0.12);
  --c-good-soft:    rgba(37, 194, 116, 0.14);
  --c-warn-soft:    rgba(242, 181, 48, 0.18);

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

  --grad-sunrise-soft: linear-gradient(120deg, rgba(255,77,109,0.14), rgba(247,183,51,0.16));
  --grad-sunrise-text: linear-gradient(120deg, #e23a5e 0%, #d9531f 50%, #a86b00 100%);

  --scrim-panel:    rgba(255, 255, 255, 0.78);
  --scrim-glass:    rgba(255, 255, 255, 0.66);

  --wash: radial-gradient(1100px 640px at 80% -14%, rgba(255,138,86,0.22), transparent 58%),
          radial-gradient(880px 540px at 8% 112%, rgba(37,194,116,0.12), transparent 60%),
          linear-gradient(180deg, #f8f6f2, var(--c-bg) 68%);

  --shadow-1: 0 1px 2px rgba(19,32,54,0.10);
  --shadow-2: 0 10px 30px rgba(19,32,54,0.12);
  --shadow-3: 0 28px 70px rgba(19,32,54,0.18);
  --shadow-accent: 0 10px 26px -8px rgba(255,77,109,0.40);
}

@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;
  }
}