/* Shared brand palette (--color-primary / -light / -dark, the ink on it --color-on-primary and the logo mark
   --color-logo) is single-sourced from design-tokens/tokens.json via Style Dictionary (F-179 TASK_08, I-021 AD4,
   I-022 AD1). Generated by `cd mobile && npm run tokens`; drift-gated by scripts/check-token-drift.js.
   @import MUST precede all rule sets below. Do NOT re-declare these five vars here —
   the drift gate fails if they are redeclared or edited out of sync.
   The import is VERSIONED with the same ?v=N as app.css in App.razor (bump both together;
   tests/scripts/css-import-versioned.test.js), so a returning browser never keeps a stale palette after a deploy. */
@import './_tokens.generated.css?v=1';

/* BRAND VALUES — I-022 AD1. The brand block only derives from the five imported vars and never redeclares them
   (scripts/css-token-parity.js). It must follow the @import directly. The rgb channels are pinned to the imported hex
   (#ed7200). "Orange only means mine" (REDESIGN_PROGRAM.md § 2). */
:root {
    /* rgb channels for rgba() composition: --X-rgb is the channel triplet of --X. */
    --color-primary-rgb: 237, 114, 0;
    --color-primary-glow: rgba(var(--color-primary-rgb), 0.4);
    /* Text on a primary fill: brand ink (5.9:1 on #ed7200, WCAG AA). White is only 3.0:1. */
    --text-on-primary: var(--color-on-primary);
}
/* END BRAND VALUES */

/* =====================================================================================================
   Dark theme block — I-022 D-i. Prototype F's dark values: the unconditional base, so "no preference" keeps today's
   dark look. Opaque flat panels, no blur. The light block below declares exactly the same names
   (scripts/css-token-parity.js --scheme-media --require-blocks). Names are kept: each group names the F role it plays
   (bg, panel, panel-2, panel-3, line, line-2, text, text-2, muted, ok, warn, err, info) exactly as the App maps them.
   --color-partial is the red-orange of a partial outage on a filled surface (README D-e); it is not F's and not orange.
   --color-partial-text is the same hue as text (the Major-impact tag label): 4.5:1 on its own 0.14 tint (WCAG 1.4.3).
   ===================================================================================================== */
:root {
    /* F --bg, --panel-2, --panel-3 */
    --color-bg-dark: #15171b;
    --color-bg-dark-secondary: #212429;
    --color-bg-dark-tertiary: #282c32;

    /* Panel names, flat F values (opaque, no blur) — F --panel / --panel-2 → --glass-bg / --glass-bg-light; F --line /
       --line-2 → --glass-border / --glass-border-light */
    --glass-bg: #1c1f24;
    --glass-bg-light: #212429;
    --glass-border: #2d3238;
    --glass-border-light: #3c424b;

    /* Status colours — F --ok / --warn / --err / --info; -rgb the hues of F's tints; --color-error is the alias of
       --color-danger (App name); -alt / -light take F's err text tone */
    --color-success: #5fd07f;
    --color-success-rgb: 76, 200, 112;
    --color-warning: #f0b44a;
    --color-warning-rgb: 240, 170, 40;
    --color-partial: #ce4833;
    --color-partial-rgb: 206, 72, 51;
    --color-partial-text: #f07258;
    --color-danger: #ff7b72;
    --color-error: var(--color-danger);
    --color-danger-rgb: 255, 99, 88;
    --color-danger-alt: #ff8f86;
    --color-info: #82b4ff;
    --color-info-rgb: 96, 150, 255;
    /* F --on-err: text on a solid err fill */
    --color-on-danger: #171820;

    /* Text — F --text / --text-2 / --muted */
    --text-primary: #eceef1;
    --text-secondary: #c3c8d0;
    --text-muted: #979eab;

    /* Orange as text ("mine": links) and its hover on the dark surfaces */
    --color-primary-text: #ff9d42;
    --color-primary-hover: var(--color-primary-light);

    /* Page ground — F is flat */
    --gradient-bg: var(--color-bg-dark);

    /* Scrollbar thumb, popover shadow */
    --scrollbar-thumb: #3c424b;
    --scrollbar-thumb-hover: #4a515c;
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* =====================================================================================================
   Light theme block — I-022 D-i. Prototype F's light values for every name of the dark block, applied when the
   system asks for a light scheme (D-c: the theme follows the system, no toggle). It sits directly in the media query:
   the lint exempts it as a token block and the parity script reads it as the light block.
   ===================================================================================================== */
@media (prefers-color-scheme: light) {
    :root {
        --color-bg-dark: #f1f2f5;
        --color-bg-dark-secondary: #f7f8fa;
        --color-bg-dark-tertiary: #eceef2;

        --glass-bg: #ffffff;
        --glass-bg-light: #f7f8fa;
        --glass-border: #dcdfe5;
        --glass-border-light: #c6cbd3;

        --color-success: #1f7a3a;
        --color-success-rgb: 31, 140, 64;
        --color-warning: #8a5300;
        --color-warning-rgb: 232, 150, 0;
        --color-partial: #e05a3a;
        --color-partial-rgb: 224, 90, 58;
        --color-partial-text: #b5401f;
        --color-danger: #c0261b;
        --color-error: var(--color-danger);
        --color-danger-rgb: 217, 45, 32;
        --color-danger-alt: #b42318;
        --color-info: #1453b8;
        --color-info-rgb: 31, 102, 214;
        --color-on-danger: #ffffff;

        --text-primary: #14161b;
        --text-secondary: #3a3f4a;
        --text-muted: #5a606d;

        --color-primary-text: #a34f00;
        --color-primary-hover: var(--color-primary-dark);

        --gradient-bg: var(--color-bg-dark);

        --scrollbar-thumb: #c6cbd3;
        --scrollbar-thumb-hover: #aab0ba;
        --shadow-popover: 0 8px 24px rgba(20, 22, 27, 0.14);
    }
}

/* Theme-independent tokens — I-022 D-i: fonts, type, spacing, radius, transitions, print ink. Not part of dark/light
   parity. */
:root {
    /* Typography — prototype F. Space Grotesk is the UI face, JetBrains Mono carries every number and label. Both are
       self-hosted (css/fonts.css); keep the system fallbacks after the first family. */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Borders — F --r-xs 6px, --r-sm 8px, --r 14px (every panel) */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 14px;
    --radius-xl: 14px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Print: greyscale on paper, whatever the screen scheme (status.css @media print) */
    --print-ink: #000;
    --print-paper: #fff;
    --print-mid: #666;
    --print-light: #999;
    --print-rule: #ccc;
}

html {
    height: 100%;
    background: var(--color-bg-dark);
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--gradient-bg);
    background-attachment: fixed;
    height: 100%;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
}

/* ========================================
   Scrollbar Styling
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ========================================
   Base Element Styles
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    margin: 0;
}

/* Orange text means "mine" — a link is one; --color-primary-text keeps it readable on both grounds (F --primary-text). */
a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: var(--font-mono);
    background: var(--glass-bg-light);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-xs);
    font-size: 0.875em;
    color: var(--text-primary);
}

pre {
    background: var(--color-bg-dark-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;
    margin: var(--space-md) 0;
}

pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--text-secondary);
}

/* ========================================
   Panel Pattern (class name kept from the glass look; F panel: opaque, 1px line, no blur, no shadow)
   ======================================== */

.glass-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

/* ========================================
   Blazor Error UI
   ======================================== */

#blazor-error-ui {
    background: var(--glass-bg);
    color: var(--text-primary);
    border-top: 1px solid var(--color-warning);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-on-danger);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ========================================
   Page Animations
   ======================================== */

@keyframes pageSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   Focus Styles
   ======================================== */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========================================
   Selection Styles
   ======================================== */

::selection {
    background: rgba(var(--color-primary-rgb), 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(var(--color-primary-rgb), 0.3);
    color: var(--text-primary);
}