/* ====================================================================
   Bukanako · base stylesheet
   --------------------------------------------------------------------
   Shared infrastructure used by every public/customer-facing page:
     - smooth scroll + reduced-motion globals
     - theme switching helpers (.theme-light-only / .theme-dark-only)
     - the masthead .theme-toggle button (sun/moon)
     - the .mark highlighter (yellow underline) baseline

   Tokens (--bg, --surface, --text, …) are NOT defined here on purpose:
   each page-specific stylesheet keeps its own palette. This file only
   provides the page-agnostic infrastructure that should never drift.

   Page-specific styles must declare a `:root[data-theme="dark"]` block
   alongside their `@media (prefers-color-scheme: dark)` block, so the
   manual toggle in the masthead can override the OS preference.
   ==================================================================== */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- Theme-conditional images ----
   Used by the brand icon and full-logo PNGs that ship as light/dark
   variants. The image you actually see follows both the manual
   data-theme override and the OS prefers-color-scheme preference.

   `!important` is used here intentionally: page-specific component CSS
   (e.g. `.brand-icon { display: block }`, `.wordmark .logo { display: block }`)
   has higher or equal specificity AND loads after this file, so without
   the override every page would render BOTH the light and dark image
   on top of each other regardless of theme. The theme-conditional
   visibility is a definitive override — it should never be beaten by a
   component rule that knows nothing about theming. */
.theme-light-only { display: block !important; }
.theme-dark-only { display: none !important; }

:root[data-theme="dark"] .theme-light-only { display: none !important; }
:root[data-theme="dark"] .theme-dark-only { display: block !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-light-only { display: none !important; }
    :root:not([data-theme="light"]) .theme-dark-only { display: block !important; }
}

/* ---- Theme toggle button ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--text);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transform: rotate(-12deg);
}

.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* The shown icon is the *target* mode — moon when light, sun when dark. */
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---- Mark / highlighter ----
   Yellow underline on emphasis words ("bookings.", "Today.").
   Each page can override the underline geometry by setting its own
   `.mark` rules; this declaration only provides the baseline. */
.mark {
    background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%);
    padding: 0 0.04em;
    font-style: italic;
}