/* ============================================================
   HOLDEN REGISTER — GLOBAL THEME TOKENS
   Applied via .theme-dark / .theme-light on the #app wrapper
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Lato:ital,wght@0,300;0,400;1,300&display=swap');

/* ────────────────────────────────────────────
   DARK THEME
──────────────────────────────────────────── */
.theme-dark {
    /* Backgrounds */
    --bg: #373639;
    --bg-card: #3f3d41;
    --bg-subtle: #46444a;
    /* Borders */
    --border: #4e4c52;
    --divider: #47454b;
    /* Text */
    --text-primary: #f0ece4;
    --text-muted: #c9a84c;
    --text-faint: #555;
    --text-disabled: #5a585e;
    /* Accent — Holden gold */
    --accent: #c9a84c;
    --accent-hover-bg: #c9a84c;
    --accent-hover-text: #373639;
    /* Buttons */
    --btn-ghost-border: #333;
    --btn-ghost-text: #3a3a3a;
    /* Kicker / label */
    --kicker: #666;
    /* Images */
    --img-soon: grayscale(100%) brightness(0.45);
    --veil-bg: rgba(30, 29, 32, 0.5);
    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
    /* Table */
    --alt-row-bg: #3b3a3d;
    /* Gallery / shared component aliases */
    --header-bg:    #46444a;
    --header-hover: #4f4d53;
    --hr-surface:   #3f3d41;
    --hr-hover:     #46444a;
    --hr-border:    #4e4c52;
    --hr-canvas:    #373639;
    --hr-muted:     #c9a84c;
    --hr-text:      #f0ece4;
}

/* ────────────────────────────────────────────
   LIGHT THEME
──────────────────────────────────────────── */
.theme-light {
    /* Backgrounds */
    --bg: #f5f2ec;
    --bg-card: #faf8f4;
    --bg-subtle: #eeeae2;
    /* Borders */
    --border: #ddd8ce;
    --divider: #e4dfd5;
    /* Text */
    --text-primary: #1a1410;
    --text-muted: #6b6055;
    --text-faint: #999;
    --text-disabled: #bbb;
    /* Accent — Holden gold (darker for light bg) */
    --accent: #9a6f1e;
    --accent-hover-bg: #9a6f1e;
    --accent-hover-text: #faf8f4;
    /* Buttons */
    --btn-ghost-border: #ccc;
    --btn-ghost-text: #bbb;
    /* Kicker / label */
    --kicker: #999;
    /* Images */
    --img-soon: grayscale(100%) brightness(0.75) opacity(0.6);
    --veil-bg: rgba(245, 242, 236, 0.4);
    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    /* Table */
    --alt-row-bg: #fbfaf6;
    /* Gallery / shared component aliases */
    --header-bg:    #eeeae2;
    --header-hover: #e0dcd3;
    --hr-surface:   #faf8f4;
    --hr-hover:     #eeeae2;
    --hr-border:    #ddd8ce;
    --hr-canvas:    #f5f2ec;
    --hr-muted:     #6b6055;
    --hr-text:      #1a1410;
}

/* ────────────────────────────────────────────
   GLOBAL BASE STYLES
   (apply to both themes)
──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Lato', Georgia, serif;
    background: var(--bg);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Typography scale */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 0.5em;
    transition: color 0.3s ease;
}

p {
    color: var(--text-muted);
    line-height: 1.7;
    transition: color 0.3s ease;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.25s ease;
}

    a:hover {
        color: var(--accent-hover-bg);
    }

/* Dividers */
hr {
    border: none;
    border-top: 1px solid var(--divider);
    margin: 2rem 0;
    transition: border-color 0.3s ease;
}

/* ────────────────────────────────────────────
   SHARED UTILITY CLASSES
──────────────────────────────────────────── */

/* Page wrapper — use on every page's root div */
.hr-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-primary);
    padding-bottom: 80px;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Section headers */
.hr-page-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.hr-kicker {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--kicker);
}

.hr-subtitle {
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Standard button styles */
.hr-btn {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 11px 34px;
    border: 1px solid;
    text-decoration: none;
    cursor: pointer;
    background: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hr-btn--primary {
    border-color: var(--accent);
    color: var(--accent);
}

    .hr-btn--primary:hover {
        background: var(--accent-hover-bg);
        color: var(--accent-hover-text);
    }

.hr-btn--danger {
    border-color: #dc2626;
    color: #dc2626;
}

    .hr-btn--danger:hover {
        background: #dc2626;
        color: #fff;
    }

.hr-btn--ghost {
    border-color: var(--btn-ghost-border);
    color: var(--btn-ghost-text);
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* Card base */
.hr-card-base {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Era / date label */
.hr-era {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color 0.3s ease;
}
/* ────────────────────────────────────────────
   FOCUS RING
   Show outline only for keyboard nav, not
   for programmatic focus (e.g. FocusOnNavigate)
──────────────────────────────────────────── */
h1:focus, h2:focus, h3:focus,
h4:focus, h5:focus, h6:focus {
    outline: none;
}
h1:focus-visible, h2:focus-visible, h3:focus-visible,
h4:focus-visible, h5:focus-visible, h6:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ────────────────────────────────────────────
   MUDBLAZOR OVERRIDES
──────────────────────────────────────────── */

/* Match MudMainContent top margin to actual AppBar height (45px) */
.mud-main-content.mt-16 {
    margin-top: 45px !important;
}