/* ==========================================================================
   OrbitOS design layer (H209B)
   - Geist, self-hosted, as the interface font (works offline).
   - Generic app cards use the theme's own surface with a thin border and
     neutral buttons. Apps with their own design (Weather, Notes, Settings,
     Music) are left alone.
   - A colored icon tile in each app's header.
   Selectors that restyle inline-styled elements are wrapped in :where() so they
   stay low-specificity: app-specific sheets (settings, music, refresh) and the
   interface themes (Glass, Glow, Fluent, AMOLED) still win where they style
   the same element.
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../app/assets/fonts/geist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../app/assets/fonts/geist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font-main: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Tokens ----------
   Theme colors are defined on body, so the derived tokens live on body's children. */
body > * {
    --ui-card: var(--surface-color, #0d1117);
    --ui-line: color-mix(in srgb, var(--on-surface, #ffffff) 11%, transparent);
    --ui-line-strong: color-mix(in srgb, var(--on-surface, #ffffff) 20%, transparent);
    --ui-muted: color-mix(in srgb, var(--on-surface, #ffffff) 60%, transparent);
    /* Near-white, tinted by the theme's text color (plain --on-surface is gray on Default). */
    --ui-ink: color-mix(in srgb, var(--on-surface, #e6edf3) 22%, #ffffff);
    --ui-on-ink: var(--background, #05080c);
}

html.theme-solar-flare body > * {
    --ui-ink: var(--on-surface);
    --ui-on-ink: var(--background);
}

/* ---------- Font ----------
   Interface text uses the interface font. Terminal output keeps the terminal font
   chosen in Settings; code and preformatted text stay monospace. */
.fullscreen-app,
.fullscreen-app :is(button, input, select, textarea) {
    font-family: var(--font-main);
}

:where(.fullscreen-app) [style*="font-family: var(--font-mono)"]:not(pre, code, kbd, samp, textarea, pre *, code *) {
    font-family: var(--font-main) !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- Cards ---------- */

:where(body.new-design .fullscreen-app:not(#weather-fullscreen, #notes-fullscreen, #settings-fullscreen, #audius-player-modal)) .modern-card {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: none !important;
}

/* ---------- Buttons ---------- */

/* Primary: filled with the theme's text color. */
:where(.fullscreen-app:not(#weather-fullscreen, #notes-fullscreen, #settings-fullscreen, #audius-player-modal), #reset-modal) button:is(
    [style*="background: var(--accent-primary"],
    [style*="background:var(--accent-primary"],
    [style*="background-color: var(--accent-primary"],
    [style*="background: rgba(71, 144, 230"]
),
:where(.fullscreen-app:not(#settings-fullscreen)) #calendar-add-event-btn {
    background: var(--ui-ink) !important;
    color: var(--ui-on-ink) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* Secondary: transparent with a thin border. */
:where(.fullscreen-app:not(#weather-fullscreen, #notes-fullscreen, #settings-fullscreen, #audius-player-modal), #reset-modal) button:is(
    [style*="background: rgba(255,255,255,0.0"],
    [style*="background: rgba(255, 255, 255, 0.0"],
    [style*="background: rgba(255,255,255,0.1"],
    [style*="background: rgba(255, 255, 255, 0.1"],
    [style*="background: transparent"][style*="border: 1px solid"]
),
body.new-design .fullscreen-app:not(#weather-fullscreen, #notes-fullscreen, #settings-fullscreen, #audius-player-modal) .close-fullscreen:not(.ok-close) {
    background: transparent !important;
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: none !important;
}

/* Destructive: same outline, red text. */
:where(.fullscreen-app:not(#weather-fullscreen, #notes-fullscreen, #settings-fullscreen, #audius-player-modal), #reset-modal) button:is(
    [style*="background: var(--error"],
    [style*="background:var(--error"],
    [style*="background: rgba(230, 69, 64"],
    [style*="background: rgba(255, 95, 86"],
    [style*="background: rgba(229, 83, 75"]
) {
    background: transparent !important;
    color: var(--error, #e5534b) !important;
    border: 1px solid color-mix(in srgb, var(--error, #e5534b) 40%, transparent) !important;
    box-shadow: none !important;
}

/* ---------- App icons ----------
   The icon in each app's header sits on a colored tile, so apps are
   recognizable at a glance instead of all sharing one blue outline icon. */
body.new-design .fullscreen-app > .fullscreen-app-header .fullscreen-app-title > svg:first-child {
    box-sizing: content-box;
    width: 18px !important;
    height: 18px !important;
    padding: 7px;
    border-radius: 10px;
    background: var(--app-hue, var(--accent-primary));
    stroke: #ffffff !important;
    color: #ffffff;
    flex-shrink: 0;
}

body.new-design .fullscreen-app > .fullscreen-app-header .fullscreen-app-title > svg:first-child * {
    stroke: #ffffff;
}

#software-fullscreen { --app-hue: #2fb57c; }
#news-fullscreen { --app-hue: #f0803c; }
#gallery-fullscreen { --app-hue: #e8557f; }
#calendar-fullscreen { --app-hue: #e5534b; }
#pulse-fullscreen { --app-hue: #1fa7c4; }
#benchmark-fullscreen { --app-hue: #e0a030; }
#browser-fullscreen { --app-hue: #4f86f7; }
#store-fullscreen { --app-hue: #8b6cf0; }
#notes-fullscreen { --app-hue: #d9a82b; }
#weather-fullscreen { --app-hue: #3a9be8; }
#settings-fullscreen { --app-hue: #6b7a90; }
#wiki-fullscreen { --app-hue: #7f8ba3; }
#calc-fullscreen { --app-hue: #f08c3a; }
#rss-fullscreen { --app-hue: #f0803c; }
#storage-fullscreen { --app-hue: #1fa7c4; }
#cmd-launcher-fullscreen { --app-hue: #4f86f7; }

/* AMOLED stays black and white. */
html.theme-amoled body.new-design .fullscreen-app > .fullscreen-app-header .fullscreen-app-title > svg:first-child {
    background: #1c1c1c;
}