/* Design tokens: the single source of truth for fonts, colours, spacing, radii and shadows.
   Theme: "Dunkle Taverne" – dark wood and night blue, parchment surfaces, brass accents.
   Only --app-* custom properties may be used for colours elsewhere in the CSS. */

@font-face {
    font-family: "Alegreya";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/alegreya-400-900-normal-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/alegreya-400-900-italic-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/alegreya-sans-400-normal-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/alegreya-sans-400-italic-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/alegreya-sans-500-normal-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../fonts/alegreya-sans-700-normal-latin.woff2") format("woff2");
}

:root {
    color-scheme: dark;

    /* Typography */
    --app-font-display: "Alegreya", Georgia, "Times New Roman", serif;
    --app-font-body: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --app-text-xs: 0.78rem;
    --app-text-sm: 0.9rem;
    --app-text-md: 1.05rem;
    --app-text-lg: 1.25rem;
    --app-text-xl: 1.6rem;
    --app-text-2xl: 2.1rem;
    --app-text-3xl: 2.8rem;
    --app-leading: 1.55;

    /* Backgrounds: night sky over dark wood */
    --app-bg: #14100c;
    --app-bg-soft: #1c1510;
    --app-bg-glow: rgba(212, 164, 65, 0.09);
    --app-bg-glow-2: rgba(91, 134, 168, 0.1);

    /* Surfaces: wood and parchment */
    --app-surface: #241b14;
    --app-surface-raised: #2d2219;
    --app-surface-sunken: rgba(8, 5, 3, 0.45);
    --app-parchment: #e9dcc3;
    --app-parchment-deep: #d6c3a0;
    --app-parchment-edge: #b8a07a;
    --app-ink: #2a1f16;
    --app-ink-muted: #5c4a3a;

    /* Lines */
    --app-border: rgba(214, 178, 120, 0.2);
    --app-border-strong: rgba(214, 178, 120, 0.42);

    /* Text */
    --app-text: #efe6d6;
    --app-text-strong: #fbf5ea;
    --app-muted: #b8a78d;
    --app-faint: #7f7160;

    /* Brass: primary accent */
    --app-primary: #d4a441;
    --app-primary-soft: #e8c36a;
    --app-primary-strong: #b8862b;
    --app-primary-contrast: #1c1408;
    --app-primary-glow: rgba(212, 164, 65, 0.22);

    /* Tones */
    --app-danger: #b3362f;
    --app-danger-soft: #e06b63;
    --app-danger-bg: rgba(179, 54, 47, 0.16);
    --app-success: #4f8a4c;
    --app-success-soft: #7fbf7b;
    --app-success-bg: rgba(79, 138, 76, 0.16);
    --app-warning: #d98b2b;
    --app-warning-soft: #f0b25f;
    --app-warning-bg: rgba(217, 139, 43, 0.16);
    --app-info: #5b86a8;
    --app-info-soft: #8fb5d4;
    --app-info-bg: rgba(91, 134, 168, 0.16);

    /* Spacing scale */
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.5rem;
    --app-space-6: 2rem;
    --app-space-7: 3rem;

    /* Shape */
    --app-radius-sm: 0.375rem;
    --app-radius: 0.625rem;
    --app-radius-lg: 1rem;
    --app-radius-pill: 999px;

    /* Elevation */
    --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --app-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    --app-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.55);
    --app-focus-ring: 0 0 0 0.2rem var(--app-primary-glow);

    /* Layout: app shell widths */
    --app-container: 1120px;
    --app-topbar-height: 3.5rem;
    --app-sidebar-width: 13.5rem;
    --app-sidebar-collapsed: 3.75rem;
    --app-panel-width: 20rem;
    --app-rail-width: 3.25rem;
    --app-transition: 160ms ease;
}