/* havag.live — design tokens (mobile-first, flat surfaces) */

html {
    -webkit-tap-highlight-color: transparent;
}

:root,
html[data-app-theme="light"] {
    --app-radius-xs: 4px;
    --app-radius-sm: 6px;
    --app-radius-md: 8px;
    --app-radius-lg: 12px;
    --app-radius-sheet: 12px;
    --app-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --app-touch-min: 44px;
    --app-header-pad-y: max(10px, env(safe-area-inset-top, 0px));
    --app-header-pad-x: max(14px, env(safe-area-inset-left, 0px));
    --app-content-pad-x: max(14px, env(safe-area-inset-left, 0px));
    --app-accent: #e92323;
    --app-accent-hover: #c91d1d;
    --app-accent-on: #ffffff;
    --app-focus-ring: 2px solid color-mix(in srgb, var(--app-accent) 65%, transparent);
}

html[data-app-theme="dark"],
html[data-app-theme="amoled"] {
    --app-accent: #e92323;
    --app-accent-hover: #fb3a3a;
    --app-accent-on: #ffffff;
    --app-focus-ring: 2px solid color-mix(in srgb, var(--app-accent) 55%, transparent);
}

/* Light */
html[data-app-theme="light"] {
    color-scheme: light;
    --bs-body-bg: #f2f1ef;
    --bs-body-color: #1c1c1c;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-bg: #e8e7e4;
    --bs-emphasis-color: #111111;
    --bs-secondary-color: #5a5855;
    --bs-border-color: #d0cec9;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
    --bs-primary: #e92323;
    --bs-primary-rgb: 233, 35, 35;
    --button-hover: rgba(0, 0, 0, 0.04);
    --button-active: rgba(0, 0, 0, 0.08);
}

/* Dark */
html[data-app-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #121212;
    --bs-body-color: #e6e6e4;
    --bs-secondary-bg: #1a1a1a;
    --bs-tertiary-bg: #242424;
    --bs-emphasis-color: #f2f2f0;
    --bs-secondary-color: #94928e;
    --bs-border-color: #2e2e2c;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.09);
    --bs-primary: #e92323;
    --bs-primary-rgb: 233, 35, 35;
    --button-hover: rgba(255, 255, 255, 0.05);
    --button-active: rgba(255, 255, 255, 0.09);
}

/* AMOLED */
html[data-app-theme="amoled"] {
    color-scheme: dark;
    --bs-body-bg: #000000;
    --bs-body-color: #e4e4e2;
    --bs-secondary-bg: #0c0c0c;
    --bs-tertiary-bg: #161616;
    --bs-emphasis-color: #f0f0ee;
    --bs-secondary-color: #8e8c88;
    --bs-border-color: #1a1a1a;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.07);
    --bs-primary: #e92323;
    --bs-primary-rgb: 233, 35, 35;
    --button-hover: rgba(255, 255, 255, 0.06);
    --button-active: rgba(255, 255, 255, 0.1);
}

body {
    font-family: var(--app-font-ui);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
}

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-color: var(--app-accent-on);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-hover-color: var(--app-accent-on);
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
    --bs-btn-active-color: var(--app-accent-on);
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-emphasis-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: none;
    outline: var(--app-focus-ring);
    outline-offset: 0;
}

.form-check-input:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
    outline: var(--app-focus-ring);
    outline-offset: 1px;
}

.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

.input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-weight: 500;
    font-size: 0.8125rem;
}

.btn:focus-visible {
    box-shadow: none;
    outline: var(--app-focus-ring);
    outline-offset: 2px;
}

.btn-check:focus-visible + .btn {
    box-shadow: none;
    outline: var(--app-focus-ring);
    outline-offset: 2px;
}