/* Shared browser and native defaults. Keep platform rules in their host styles. */
:root {
    --paper: #f7f5ef;
    --paper-deep: #eeebe2;
    --surface: #fffdf8;
    --ink: #262823;
    --ink-soft: var(--ink);
    --ink-faint: var(--ink);
    --muted: var(--ink);
    --line: #dcd8ce;
    --accent: #c76345;
    --accent-deep: #9f422b;
    --accent-soft: #f1d9cf;
    --sage: #687b69;
    --focus: var(--ink-soft);
    --board-blue-ink: #225ecc;
    --danger: #a33a34;
    --shadow: 0 26px 70px rgba(55, 45, 31, .12);
    --radius: 14px;
    --content: 1180px;
    font-family: var(--yako-font);
    color-scheme: light dark;
}

html[data-theme="light"] { color-scheme: only light; }

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --paper: #1c1c1c;
        --paper-deep: #232323;
        --surface: #262626;
        --surface-raised: #303030;
        --surface-muted: #303030;
        --ink: #ffffff;
        --ink-soft: #ffffff;
        --muted: #ffffff;
        --line: #3d3d3d;
        --accent: #e58768;
        --accent-deep: #f2a286;
        --accent-soft: #4a2e26;
        --sage: #9fb3a0;
        --danger: #ff9b92;
        --shadow: 0 28px 70px rgba(0,0,0,.28);
    }
}

*, *::before, *::after { box-sizing: border-box; }
/* Keep scrolling available in every host and screen without visible bars or gutters. */
* { scrollbar-width:none!important; scrollbar-gutter:auto!important; }
*::-webkit-scrollbar { display:none!important; width:0!important; height:0!important; }
/* Keep responsive type at its authored size after rotation, while allowing user zoom. */
html { scroll-behavior: smooth; background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); line-height: 1.55; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 42%, transparent); text-underline-offset: .2em; }
a:hover:where(:not([data-touch-input] *)) { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible), :where([role="dialog"][tabindex="-1"]):focus { outline: none; }
/* One single-argument :where() per field kind keeps zero specificity while the
   style engine files each selector under its tag or attribute. A shared list
   would be tested against every element on each restyle. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):focus-visible, :where(textarea):focus-visible, :where(select):focus-visible, :where([contenteditable="true"]):focus-visible { outline: none; border-color: var(--focus); }
/* Text fields fade their focus highlight in and out. Color-only transitions
   repaint just the field and run only when focus changes the color. Fields
   with their own transition list keep it. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])), :where(textarea), :where(select), :where([contenteditable="true"]) { transition: border-color 180ms ease-out, outline-color 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])), :where(textarea), :where(select), :where([contenteditable="true"]) { transition: none; }
}
h1:focus, h2:focus { outline: none; }
::selection { background: var(--accent-soft); color: var(--ink); }

h1, h2, h3 { margin: 0; font-family: var(--yako-font); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.7rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }

.button, .secondary-button, .oauth-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-weight: 680; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button { background: var(--ink); color: var(--paper); box-shadow: none; }
.button:hover:where(:not([data-touch-input] *)) { transform: translateY(-1px); background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
.button-small { min-height: 40px; padding-inline: 17px; font-size: .9rem; }
.button-full { width: 100%; }
.secondary-button { color: var(--ink); border-color: var(--line); background: var(--surface); }
.secondary-button:hover:where(:not([data-touch-input] *)) { border-color: var(--ink-soft); transform: translateY(-1px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 660; text-decoration: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--ink); font-weight: 710; letter-spacing: -.025em; text-decoration: none; }
.brand-mark { position: relative; width: 29px; height: 29px; display: inline-grid; place-items: center; background: var(--accent); border-radius: 56% 44% 48% 52% / 47% 44% 56% 53%; transform: rotate(-8deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 10px; height: 10px; top: -2px; background: var(--accent); border-radius: 3px 9px 2px 9px; }
.brand-mark::before { left: 2px; transform: rotate(-18deg); }
.brand-mark::after { right: 2px; transform: rotate(108deg); }
.brand-mark > span { width: 7px; height: 7px; border-radius: 50%; background: var(--surface); box-shadow: 9px 0 0 var(--surface); }
@media (max-width: 650px) {
    .button-small { min-height: 38px; padding-inline: 14px; }
}