/*
 * Angelia 2 — Design Tokens
 *
 * CSS custom properties for theming. Used by LLMs when authoring
 * FlexPage and BlogPage HTML content.
 *
 * Fonts: Inter (headings), Source Sans Pro (body), JetBrains Mono (code)
 * Icons: Bootstrap Icons only
 * Framework: Bootstrap 5
 */

/* ── Font Faces (self-hosted) ── */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-regular.f837d382a885.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-semibold.75fb76ec3559.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-bold.3714175d15f3.woff2") format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-pro-regular.27ab01c4cb50.woff2") format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-sans-pro-semibold.9a35cba76eda.woff2") format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-pro-italic.410bdda67c60.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-regular.0062bf1cab80.woff2") format('woff2');
}

/* ── Design Tokens ── */

:root {
    /* Colors */
    --color-primary: #2E86AB;
    --color-primary-dark: #1B5E7D;
    --color-primary-light: #5BA4C4;
    --color-secondary: #A23B72;
    --color-accent: #F18F01;
    --color-success: #2DC653;
    --color-warning: #F18F01;
    --color-danger: #E63946;

    /* Neutrals */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8F9FA;
    --color-surface: #FFFFFF;
    --color-text: #1B1B1E;
    --color-text-muted: #6C757D;
    --color-border: #DEE2E6;

    /* Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-sm: 0.875rem;
    --line-height-base: 1.6;
    --line-height-heading: 1.2;

    /* Spacing */
    --spacing-unit: 8px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-2xl: 96px;

    /* Layout */
    --max-prose-width: 720px;
    --sidebar-width: 280px;

    /* Borders & Shapes */
    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-radius-full: 9999px;
    --border-width: 1px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

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

/* ── Base Typography ── */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
    font-weight: 600;
}

code, pre, kbd {
    font-family: var(--font-mono);
}

/* ── Page Gutter ──
   One responsive side padding, on Bootstrap's sm, lg and xxl breakpoints.
   The navbar, the footer and every template-generated section carry
   .site-gutter, so their edges line up at every width; authored HTML gets
   no wrapper and opts in with .site-gutter or .content-section. Sections
   span the viewport; only running text (.prose) keeps a measure. */

:root { --site-gutter: 1rem; }

@media (min-width: 576px) { :root { --site-gutter: 2rem; } }
@media (min-width: 992px) { :root { --site-gutter: 3rem; } }
@media (min-width: 1400px) { :root { --site-gutter: 4rem; } }

.site-gutter {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}

/* ── Utility Classes ── */

/* A full-width section: the page gutter plus vertical padding. */
.content-section {
    padding: var(--spacing-lg) var(--site-gutter);
}

/* Running text: a readable measure, aligned to the gutter like the headers. */
.prose {
    max-width: var(--max-prose-width);
}

.img-full {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.img-rounded {
    border-radius: var(--border-radius-lg);
}

/* Blog and event hero images span the page; crop them wide on desktop. */
@media (min-width: 992px) {
    .post-hero img,
    .event-hero img {
        aspect-ratio: 21 / 9;
    }
}

/* ── Page Content Area ── */

.page-content {
    min-height: 60vh;
    padding-bottom: var(--spacing-xl);
}