/*
 * Design tokens for the Razor UI. Never hardcode a hex value in a page or
 * components.css - add a token here instead. Dark theme overrides the same
 * custom properties via [data-theme="dark"] on <html>.
 *
 * Values mirror the Angular shell's brand variables in
 * ClientApp/src/scss/_commonAppVariables.scss (the "commonly changed when
 * spinning up a new shell" file) so both UIs read as the same product.
 * When rebranding a spun-off project, change that file and this one together.
 */
:root {
    /* Color (Bootstrap-derived palette from the Angular shell) */
    --psh-bg: #f8f9fa;
    --psh-surface: #ffffff;
    --psh-surface-raised: #ffffff;
    --psh-border: #c7cdd3;
    --psh-text: #212529;
    --psh-text-muted: #6c757d;
    --psh-link: #007bff;
    --psh-auth-link: #666666;

    /* $save-button-color drives primary actions, like btn-save */
    --psh-primary: #088725;
    --psh-primary-hover: #06691d;
    --psh-primary-contrast: #ffffff;
    --psh-danger: #dc3545;
    --psh-danger-bg: #f8d7da;
    --psh-success: #28a745;
    --psh-success-bg: #d4edda;
    --psh-info: #298cb2;
    --psh-info-bg: #d1ecf1;
    --psh-focus-ring: #08872540;

    /* Navbar ($main-navbar-* / accent from the Angular shell) */
    --psh-nav-bg: #1e1e1e;
    --psh-nav-text: #ffffff;
    --psh-nav-active-bg: #404040;
    --psh-nav-accent: #9cce52;

    /* Tables ($table-header-bg) */
    --psh-table-header-bg: #333333;
    --psh-table-header-text: #ffffff;
    --psh-table-hover: rgb(33 37 41 / 0.06);

    /* Type (Bootstrap $font-family-sans-serif) */
    --psh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --psh-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --psh-text-size: 1rem;
    --psh-text-size-sm: 0.875rem;
    --psh-text-size-lg: 1.25rem;

    /* Shape / spacing (Bootstrap radii) */
    --psh-radius: 0.3rem;
    --psh-radius-sm: 0.25rem;
    --psh-gap: 1rem;
    --psh-gap-sm: 0.5rem;
    --psh-gap-lg: 1.5rem;
    --psh-shadow: 0 1px 3px rgb(16 24 40 / 0.10), 0 1px 2px rgb(16 24 40 / 0.06);

    /* Layout */
    --psh-topnav-height: 3.25rem;
    --psh-page-max-width: 72rem;
}

[data-theme="dark"] {
    --psh-bg: #14181e;
    --psh-surface: #1d232c;
    --psh-surface-raised: #242b36;
    --psh-border: #39424e;
    --psh-text: #e6eaef;
    --psh-text-muted: #9aa4b0;
    --psh-link: #6fb3ff;
    --psh-auth-link: #9aa4b0;
    --psh-primary: #2ea24a;
    --psh-primary-hover: #3cb85a;
    --psh-primary-contrast: #ffffff;
    --psh-danger: #e07b73;
    --psh-danger-bg: #3a2422;
    --psh-success: #7cc39a;
    --psh-success-bg: #20312a;
    --psh-info: #64b1d1;
    --psh-info-bg: #1f2a3a;
    --psh-focus-ring: #2ea24a66;
    --psh-nav-bg: #10151c;
    --psh-nav-text: #e6eaef;
    --psh-nav-active-bg: #2b333f;
    --psh-nav-accent: #9cce52;
    --psh-table-header-bg: #10151c;
    --psh-table-header-text: #e6eaef;
    --psh-table-hover: rgb(230 234 239 / 0.08);
    --psh-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}