@font-face {
    font-family: Ethnocentric;
    src: url(/fonts/Ethnocentric-Regular.otf);
}

@font-face {
    font-family: Michroma;
    src: url(/fonts/Michroma-Regular.ttf);
}

:root {
    --color-accent-A: #00e896ff;
    --color-accent-B: #007d8dff;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    --action-primary: var(--color-blue-500);
    --action-primary-hover: var(--color-blue-700);
    --action-accent: var(--color-amber-500);
    --action-accent-hover: var(--color-amber-700);
    --border-subtle: var(--color-neutral-200);
    --border-strong: var(--color-neutral-400);
    --bg-page: var(--color-neutral-100);
    --bg-surface: var(--color-neutral-000);
    --bg-subtle: var(--color-neutral-200);
    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-700);
    --text-muted: var(--color-neutral-400);
    --text-on-brand: var(--color-neutral-000);
    --text-highlight: var(--color-accent-B);
}

:root,
[data-theme="light"] {
    /* Soft, low-glare neutrals — a muted off-white surface over a slightly deeper page background,
       instead of stark white, so large light-mode areas read as calm rather than glaring. */
    --color-neutral-000: #f6f7f8;
    --color-neutral-100: #eceef0;
    --color-neutral-200: #dde0e3;
    --color-neutral-400: #8d939b;
    --color-neutral-700: #3f454d;
    --color-neutral-900: #1a1d21;
    /* Tells the browser this page is light-themed, so native controls we don't (or can't) fully re-skin — a
       <select>'s open dropdown list, scrollbars, etc. — render with light-appropriate UA colors instead of
       always defaulting to light regardless of our own palette. */
    color-scheme: light;
}

[data-theme="dark"] {
    /* Near-neutral charcoal (minimal blue tint) and darker than before — page background sits below
       the surface color for a subtle elevation cue rather than the previous surface-darker-than-page setup. */
    --color-neutral-000: #17191c;
    --color-neutral-100: #0c0d0f;
    --color-neutral-200: #232629;
    --color-neutral-400: #71757b;
    --color-neutral-700: #c7cad0;
    --color-neutral-900: #f2f3f4;
    /* Without this, native controls ignore our dark palette and default to their light UA rendering — a <select>'s
       open dropdown list ends up with a white popup background behind text colored by --text-primary (near-white
       in dark mode), which is what made the livery car picker unreadable. */
    color-scheme: dark;
}

body {
    margin: 0;
    padding: 0;
    /* 100% (not 100vw) so the body is exactly the visible width. 100vw counts the vertical scrollbar's gutter,
       making the body ~15px wider than what's on screen; overflow-x:hidden then clips that off the right, which
       shows up as an uneven right margin (most obvious on full-width mobile layouts). */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: Michroma;
    background-color: var(--bg-page);
    color: var(--text-primary);
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Fills all leftover space between the navbar and footer so short pages still push the footer to the bottom. */
.page-main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

span {
    color: var(--text-primary);
}

h1, h2, h3 {
    font-family: Ethnocentric;
    font-weight: normal;
}

.iconify {
    font-size: 1.2em !important;
    width: 1.2em !important;
    height: 1.2em !important;
    color: var(--text-primary) !important;
}

svg {
    color: var(--text-primary);
}

/* Feed type badge — shared across the public feed, article pages, and the admin table, so it lives here rather than
   in any one component's scoped stylesheet (scoped CSS wouldn't apply across those separate components). */
.feed-type-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-family: Michroma;
    white-space: nowrap;
}

.feed-type-news {
    background: color-mix(in srgb, var(--color-info) 20%, transparent);
    color: var(--color-info);
}

.feed-type-event {
    background: color-mix(in srgb, var(--color-accent-A) 22%, transparent);
    color: var(--text-highlight);
}

/* Shared centered "not found" block for the feed article pages (which have no scoped stylesheet of their own). */
.article-not-found {
    text-align: center;
    padding: 4rem 1.5rem;
}

    .article-not-found a {
        color: var(--color-accent-A);
        text-decoration: none;
    }