/* ==========================================================================
   DESIGN TOKENS
   The central design file: every colour, font and recurring size of the
   site lives here. Change a value once and it applies everywhere.
   Reach for a token before hard-coding a value in a component.
   The reasoning behind the values: design/Design-Baseline.md

   Breakpoints — CSS variables can't be used inside @media, so they are
   listed here and written out literally in the stylesheets:
       600px    phones → large phones / small tablets (two-column form rows)
       900px    mobile → desktop layout (the main breakpoint)
       1200px   wide screens (chapter strip in one row, capsule team gallery)
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Palette ---------------------------------------------------------- */
    --cream:        #f1f2eb;  /* page background */
    --white:        #ffffff;  /* cards */
    --mist:         #f6f6f3;  /* form fields, quiet panels */
    --ink:          #242424;  /* text, dark buttons and panels */
    --ink-soft:     #3a3a3a;  /* hover of dark buttons */
    --ink-muted:    #5f5f5a;  /* secondary text — 5.7:1 on cream, 6.4:1 on white */
    --orange:       #ff6941;  /* THE accent. As a filled surface it means one thing: donate */
    --orange-hover: #ff8462;
    --orange-text:  #c2410c;  /* orange as text on light backgrounds — 4.6:1 on cream */
    --green:        #1f7a3d;
    --green-tint:   #e6f2e9;
    --red:          #b42318;
    --red-tint:     #fbeae8;

    /* --- Semantic colours (use these in components) ---------------------- */
    --color-bg:           var(--cream);
    --color-surface:      var(--white);
    --color-field:        var(--mist);
    --color-text:         var(--ink);
    --color-text-muted:   var(--ink-muted);
    --color-accent:       var(--orange);       /* donate buttons — nothing else is filled orange */
    --color-accent-hover: var(--orange-hover);
    --color-accent-text:  var(--orange-text);  /* one word per headline, chapter labels */
    --color-inverse:      var(--ink);          /* dark panels */
    --color-on-inverse:   var(--cream);
    --color-on-inverse-muted: rgba(241, 242, 235, 0.78);
    --color-line:         rgba(36, 36, 36, 0.14);
    --color-line-strong:  rgba(36, 36, 36, 0.32);
    --color-scrim:        rgba(18, 18, 18, 0.56);  /* over photos, behind white text */
    --color-success:      var(--green);
    --color-error:        var(--red);

    /* --- Typography ------------------------------------------------------
       Anton: heavy condensed capitals for headlines (photos fit into its strokes).
       Manrope: calm, legible text; small spaced capitals for labels and buttons. */
    --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --text-display-xl: clamp(3.25rem, 1.9rem + 6.6vw, 8.5rem);    /* page titles */
    --text-display-lg: clamp(2.5rem, 1.7rem + 4vw, 5.25rem);      /* section titles */
    --text-display-md: clamp(2rem, 1.55rem + 2.2vw, 3.5rem);      /* slides, calls to action */
    --text-display-sm: clamp(1.625rem, 1.4rem + 0.9vw, 2.25rem);  /* card titles */
    --text-lead:       clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
    --text-body:       1.0625rem;
    --text-small:      0.9375rem;
    --text-xs:         0.8125rem;  /* labels, buttons, navigation */

    --leading-display: 1.04;  /* Anton's caps are 0.86em tall, Ä/Ö/Ü reach 1.06em */
    --leading-body:    1.65;
    --tracking-label:  0.09em;

    /* --- Layout ---------------------------------------------------------- */
    --gutter:        clamp(1rem, 0.4rem + 2.6vw, 2.5rem);  /* 16px on phones */
    --container:     82.5rem;                              /* 1320px of content */
    --measure:       62ch;
    --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --header-height: 4rem;

    /* --- Shape ----------------------------------------------------------- */
    --radius-sm:   0.75rem;
    --radius-md:   1.25rem;
    --radius-lg:   clamp(1.375rem, 1rem + 1vw, 2rem);
    --radius-pill: 999px;

    /* --- Motion ---------------------------------------------------------- */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.2s;
    --duration:      0.45s;
    --duration-slow: 0.8s;
}

@media (min-width: 900px) {
    :root {
        --header-height: 5rem;
    }
}