/* ============================================
   CSS Variables - Typography & Colors
   ============================================
   
   Change fonts here to apply across the entire site.
   To try different fonts:
   1. Update the @import URL below with your desired Google Fonts
   2. Update the --font-* variables to use the new font names
   
   ============================================ */

/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;700&family=Crimson+Text:wght@400;600&family=Oranienbaum&family=Ledger&family=Cutive+Mono&family=Fascinate&family=Revalia&family=Tourney:wght@400;700&family=Stalinist+One&family=Pirata+One&family=Space+Grotesk:wght@400;700&family=Doto:wght@400;700&family=Kumar+One+Outline&family=Bungee+Outline&family=IBM+Plex+Mono:wght@400;700&family=Roboto+Mono:wght@400;700&family=EB+Garamond:wght@400;700&family=Coral+Pixels&display=swap");

:root {
    /* ============================================
     Font Families
     ============================================ */

    /* Display/Title font - used for main headings, logo, nav links */
    /* Note: Fonts with multiple weights available: Bodoni Moda, Tourney, Space Grotesk, Doto, IBM Plex Mono, Roboto Mono, EB Garamond (400, 700) */
    /* Single-weight fonts (use 400): Pirata One, Kumar One Outline, Bungee Outline, Stalinist One, Fascinate, Revalia, Oranienbaum, Cutive Mono, Coral Pixels */
    /* --font-display: "Pirata One", serif; */
    /* --font-display: "Tourney", sans-serif; */
    /* --font-display: "Space Grotesk", sans-serif; */
    /* --font-display: "Kumar One Outline", system-ui; */
    /* --font-display: "Bungee Outline", sans-serif; */
    /* --font-display: "Bodoni Moda", serif; */
    /* --font-display: "Stalinist One", system-ui; */
    /* --font-display: "Fascinate", system-ui; */
    /* --font-display: "Revalia", system-ui; */
    /* --font-display: "Doto", sans-serif; */
    /* --font-display: "Oranienbaum", serif; */
    /* --font-display: "Cutive Mono", monospace; */
    /* --font-display: "IBM Plex Mono", monospace; */
    /* --font-display: "Roboto Mono", monospace; */
    /* --font-display: "EB Garamond", serif; */
    --font-display: "Coral Pixels", system-ui;
    /* --font-display: "Crimson Text", serif; */

    /* Display font weight - use 700 for Bodoni Moda, Tourney, Space Grotesk, Doto, Roboto, IBM Plex; use 400 for others */
    --font-display-weight: 400;
    /* --font-display-weight: 700; */

    /* Body font - used for paragraphs, descriptions, general text */
    /* --font-body: "Crimson Text", serif; */
    /* --font-body: "Ledger", serif; */
    /* --font-body: "Cutive Mono", monospace; */
    /* --font-body: "Roboto Mono", monospace; */
    --font-body: "EB Garamond", serif;

    /* Heading font - defaults to display font, but can be customized separately */
    --font-heading: var(--font-display);

    /* Navigation font */
    --font-nav: var(--font-display);

    /* ============================================
     Font Sizes
     ============================================ */

    --font-size-base: 18px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 4rem;

    /* Special sizes */
    --font-size-hero-min: 3rem;
    /* Minimum hero heading size */
    --font-size-hero-preferred: 16vw;
    /* Preferred hero heading size (scales with viewport) */
    --font-size-hero-max: 12rem;
    /* Maximum hero heading size */
    --font-size-logo: 2.2rem;
    /* Header logo size */

    /* Responsive hero heading sizes (tablet ≤900px) */
    --font-size-hero-tablet-min: 2rem;
    --font-size-hero-tablet-preferred: 14vw;
    --font-size-hero-tablet-max: 7rem;

    /* Responsive hero heading sizes (mobile ≤480px) */
    --font-size-hero-mobile-min: 1.5rem;
    --font-size-hero-mobile-preferred: 18vw;
    --font-size-hero-mobile-max: 9rem;

    /* ============================================
     Typography Settings
     ============================================ */

    --line-height-body: 1.6;
    --line-height-heading: 1.1;
    --letter-spacing-heading: -0.02em;
    --text-transform-heading: lowercase;
    /* lowercase, uppercase, none, capitalize */

    /* ============================================
     Colors
     ============================================ */

    --color-primary: #0000ff;
    --color-text: #444;
    --color-text-muted: rgba(0, 0, 0, 0.5);
    /* For secondary/lighter text */
    --color-background: #ffffff;
    --color-surface: #f0f0f0;
    --color-muted: rgba(0, 0, 0, 0.3);
    --color-link-hover: #0000ff;
    /* Link hover state */
    --color-border: var(--border-default-color);
    /* Legacy alias — now driven by --border-default-color */

    /* ============================================
     Spacing
     ============================================ */

    --spacing-page: 1.5rem;
    /* Page padding/margins */
    --spacing-section: 3rem;
    /* Gap between sections */
    --header-height: 50px;
    /* Fixed header height */
    --footer-height: 60px;
    /* Project nav footer height */

    /* ============================================
     Layout
     ============================================ */

    --max-width-content: 1200px;
    --main-max-width: min(100vw, var(--max-width-content));
    /* Max width for content containers */
    --carousel-gap: 1.5rem;
    /* Gap in carousel grid layout */
    --hero-carousel-width: 80%;
    /* Width of hero carousels in 2-column layout (use 100% for full width) */
    --hero-carousel-image-gap: 15rem;
    /* Gap between images in hero carousel (e.g., 0, 1rem, 2rem) */
    --hero-carousel-speed: 180s;
    /* Duration for one full carousel cycle (higher = slower) */
    --hero-container-max-width: 1200px;
    /* Max width of hero page container */
    --hero-container-height: 100vh;
    /* Height of hero page carousel area (e.g., 100vh, 90vh, calc(100vh - 50px)) */
    --hero-container-padding-y: 0;
    /* Top/bottom padding inside hero page container */
    --hero-container-padding-x: 1rem;
    /* Left/right padding inside hero page container */

    /* Breakpoints (for reference - CSS can't use variables in media queries) */
    /* Mobile: 768px */
    /* Tablet: 900px */
    /* Desktop: 1024px */

    /* ============================================
     Effects
     ============================================ */

    --transition-speed: 0.2s;
    /* Default transition duration */
    --transition-speed-slow: 1s;
    /* Slower transitions (e.g., carousel) */
    --border-default-width: 1px;
    --border-default-style: solid;
    --border-default-color: var(--color-primary);
    --border-archive-item-width: var(--border-default-width);
    --border-archive-item-style: var(--border-default-style);
    --border-archive-item-color: var(--border-default-color);
    --border-archive-link-width: var(--border-default-width);
    --border-archive-link-style: dashed;
    --border-archive-link-color: var(--border-default-color);
    --border-mobile-menu-width: var(--border-default-width);
    --border-mobile-menu-style: var(--border-default-style);
    --border-mobile-menu-color: var(--border-default-color);
    --border-hero-gallery-width: var(--border-default-width);
    --border-hero-gallery-style: var(--border-default-style);
    --border-hero-gallery-color: var(--border-default-color);
    --border-hero-container-width: var(--border-default-width);
    --border-hero-container-style: var(--border-default-style);
    --border-hero-container-color: var(--border-default-color);
    --border-project-carousel-width: var(--border-default-width);
    --border-project-carousel-style: var(--border-default-style);
    --border-project-carousel-color: var(--border-default-color);
    --border-project-info-width: var(--border-default-width);
    --border-project-info-style: var(--border-default-style);
    --border-project-info-color: var(--border-default-color);
    --border-project-description-width: var(--border-default-width);
    --border-project-description-style: var(--border-default-style);
    --border-project-description-color: var(--border-default-color);
    --border-events-item-width: var(--border-default-width);
    --border-events-item-style: var(--border-default-style);
    --border-events-item-color: var(--border-default-color);
    --border-info-about-width: var(--border-default-width);
    --border-info-about-style: var(--border-default-style);
    --border-info-about-color: var(--border-default-color);
    --border-info-events-width: var(--border-default-width);
    --border-info-events-style: var(--border-default-style);
    --border-info-events-color: var(--border-default-color);
    --border-info-impressum-width: var(--border-default-width);
    --border-info-impressum-style: var(--border-default-style);
    --border-info-impressum-color: var(--border-default-color);
    --border-header-width: var(--border-default-width);
    --border-header-style: var(--border-default-style);
    --border-header-color: var(--border-default-color);
    --border-project-nav-width: var(--border-default-width);
    --border-project-nav-style: var(--border-default-style);
    --border-project-nav-color: var(--border-default-color);
    --border-maintenance-login-width: var(--border-default-width);
    --border-maintenance-login-style: var(--border-default-style);
    --border-maintenance-login-color: var(--border-default-color);
    --scrollbar-width: 8px;
    --scrollbar-thumb-color: var(--color-border);
    --scrollbar-thumb-hover-color: var(--color-primary);
    --scrollbar-track-color: transparent;
    --scrollbar-radius: 8px;

    /* ============================================
     Text Decorations
     ============================================ */

    /* Paragraph prefix - set to "" to disable, or use "> ", "— ", "• ", etc. */
    --paragraph-prefix: "> ";
    /* --paragraph-prefix: ""; */

    /* Carousel dot symbol - use "●", "○", "■", "□", "◆", "◇", "•", "·", "—", etc. */
    --carousel-dot: "<";
    --carousel-dot-active: ">";
    /* --carousel-dot: "□"; */
    /* --carousel-dot-active: "■"; */
    /* --carousel-dot: "◇"; */
    /* --carousel-dot-active: "◆"; */

    /* Carousel dot colors */
    --carousel-dot-color: var(--color-muted);
    --carousel-dot-color-active: var(--color-primary);
    --project-dot-slot-width: 18px;
    --project-dots-max-small: 14;
    --project-dots-max-large: 40;

    /* ============================================
     Maintenance Page
     ============================================ */
    --maintenance-align-vertical: center;
    /* flex alignment: center, flex-start, flex-end */
    --maintenance-align-horizontal: left;
    /* text-align: left, center, right */
}