/* RepeatBox design tokens — aligned with the current Material 3 app and store artwork. */
:root {
    --rb-primary: #55a3ff;
    --rb-primary-strong: #1769d4;
    --rb-primary-deep: #24558f;
    --rb-primary-container: #cfe2ff;
    --rb-primary-container-2: #e8f2ff;
    --rb-tertiary: #b747c9;
    --rb-tertiary-container: #f5d5ff;
    --rb-mint: #dff5eb;
    --rb-mint-strong: #28b56f;
    --rb-coral: #ba1a1a;
    --rb-coral-container: #ffdad6;

    --rb-ink: #172033;
    --rb-on-surface: #1a1c1e;
    --rb-on-surface-muted: #55657c;
    --rb-surface: #fbfcff;
    --rb-surface-low: #f4f7fb;
    --rb-surface-container: #edf1f7;
    --rb-surface-high: #e4e8f0;
    --rb-outline: #8b94a3;
    --rb-outline-variant: #d7dee9;

    --rb-info-bg: #e8f2ff;
    --rb-info-border: #55a3ff;
    --rb-warning-bg: #fff2ef;
    --rb-warning-border: #e06c5b;

    --rb-radius-sm: 10px;
    --rb-radius-md: 16px;
    --rb-radius-lg: 24px;
    --rb-radius-xl: 34px;
    --rb-shadow-1: 0 10px 30px rgba(37, 60, 96, 0.10);
    --rb-shadow-2: 0 28px 80px rgba(37, 60, 96, 0.18);

    --rb-font-heading: "Google Sans", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
    --rb-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
    --rb-text-base: 16px;
    --rb-line-base: 1.8;
    --rb-h1-size: clamp(2rem, 5vw, 3.5rem);
    --rb-h2-size: clamp(1.55rem, 3vw, 2.35rem);
    --rb-measure: 720px;
    --rb-content: 1120px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--rb-surface);
    color: var(--rb-on-surface);
    font-family: var(--rb-font-sans);
    line-height: var(--rb-line-base);
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.brand,
.site-brand {
    color: var(--rb-ink);
    font-family: var(--rb-font-heading);
    overflow-wrap: anywhere;
}

a {
    color: var(--rb-primary-strong);
}

::selection {
    background: var(--rb-primary-container);
    color: var(--rb-ink);
}

:focus-visible {
    outline: 3px solid var(--rb-primary);
    outline-offset: 3px;
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}