/* =========================================================================
   BASE.CSS
   Design tokens, reset, typografie, layout helpers, reduced motion.
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
    --bg: #c9d09a;
    --bg-deep: #b8c186;
    --dark: #2F4F4F;
    --paper: #faf7ed;
    --paper-soft: #fefcf6;
    --accent: #c08552;
    --accent-deep: #8b5a3c;
    --ink: #1f2820;
    --line: rgba(47, 79, 79, 0.18);
    --warn: #8b3a2a;
    --warn-deep: #6e2b1f;

    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
}


/* =========================================================================
   2. RESET, BASE & TYPOGRAFIE
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

html { scroll-behavior: smooth; background: var(--dark); overflow-x: hidden; }

body {
    font-family: 'General Sans', sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    font-family: 'Clash Display', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}


/* =========================================================================
   3. LAYOUT HELPERS
   ========================================================================= */
.wrapper { width: min(1240px, 92%); margin: auto; position: relative; }


/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .accent-block,
    .notification-bar,
    .summary-card,
    .event-date,
    .step-card,
    .step-card:nth-child(1),
    .step-card:nth-child(2),
    .step-card:nth-child(3) {
        transform: none;
    }
}