/*
 * 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.woff2') format('woff2');
}

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

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-bold.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.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.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.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-regular.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-content-width: 1200px;
    --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);
}

/* ── Utility Classes ── */

.content-section {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-lg);
}

.prose {
    max-width: var(--max-prose-width);
    margin-left: auto;
    margin-right: auto;
}

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

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

/* ── Page Content Area ── */

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