/* =============================================================================
   SV Rellingen — design tokens

   Derived from the draft in .development/claude-design/. The draft lists 43
   colour values; half of them differ by 0.005 in saturation and cannot be
   told apart side by side. What follows is what actually serves a distinct
   purpose.

   Values in rgb() rather than oklch(): older devices in the target audience
   do not render oklch(), and a per-declaration fallback would be double
   upkeep.
   ========================================================================== */

:root {

    /* ── Surfaces (dark → light) ────────────────────────────────────────────── */

    --svr-surface-deep: rgb(2, 23, 9); /* bottom bar, recessed areas     */
    --svr-surface-header: rgb(14, 37, 23); /* header, footer, sections        */
    --svr-surface-page: rgb(24, 44, 31); /* page background                 */
    --svr-surface-card: rgb(28, 55, 38); /* cards, stat bar, table rows     */
    --svr-surface-plate: rgb(243, 246, 244); /* light patch behind logos        */

    --svr-border: rgb(41, 68, 51);
    --svr-border-strong: rgb(62, 90, 72); /* outlined buttons                */

    /* ── Text on dark surfaces ─────────────────────────────────────────────── */

    --svr-text-faint: rgb(142, 157, 144); /* 5.2 : 1 on surface-page         */
    --svr-text-muted: rgb(165, 182, 168);
    --svr-text: rgb(197, 210, 199);
    --svr-text-strong: rgb(241, 247, 242);

    /* ── Accent ────────────────────────────────────────────────────────────── */

    --svr-accent: rgb(100, 220, 115);
    --svr-accent-hover: rgb(131, 242, 142);
    --svr-accent-text: rgb(2, 23, 9);

    /* Link colour for light sections. The draft value rgb(5,137,62) only
       reaches 4.15 : 1 there and misses AA for body text — darkened to
       5.9 : 1. */
    --svr-link: rgb(3, 110, 48);
    --svr-link-hover: rgb(2, 85, 36); /* 8.3 : 1                         */

    --svr-gold: rgb(240, 197, 81);
    --svr-silver: rgb(200, 210, 205);
    --svr-bronze: rgb(205, 145, 95);

    /* ── Categories (events) ───────────────────────────────────────────────── */
    /* Colour is never the only distinguishing feature — the category always
       appears as text next to it as well.                                     */

    --svr-category-competition: var(--svr-gold);
    --svr-category-social: rgb(240, 150, 140);

    /* ── Form states ───────────────────────────────────────────────────────── */

    --svr-error: rgb(255, 154, 140); /* on dark surface                 */
    --svr-error-light: rgb(158, 34, 17); /* on light surface                */
    --svr-success: var(--svr-accent);
    --svr-success-light: var(--svr-link);

    /* ── Highlighted area (youth panel, sticky boxes) ───────────────────────── */

    --svr-panel-surface: rgb(22, 54, 28);
    --svr-panel-border: rgb(37, 90, 47);
    --svr-panel-text: rgb(192, 217, 195);

    /* ── Image overlays ────────────────────────────────────────────────────── */
    /* Colour only. Gradient direction and stops stay with the individual
       component — the draft uses three different directions.                  */

    --svr-scrim: rgba(3, 17, 8, 0.55);
    --svr-scrim-card: rgba(28, 55, 38, 0.85);
    --svr-overlay: rgba(52, 79, 61, 0.3);

    /* ── Typeface ──────────────────────────────────────────────────────────── */

    --svr-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --svr-font-body: "Barlow", system-ui, -apple-system, sans-serif;

    /* Sizes: first value mobile, second value desktop maximum. The draft is
       fixed at 1440px — the clamp() values define the upper bound and scale
       down from there.                                                        */

    --svr-size-meta: 0.75rem; /* 12px       */
    --svr-size-small: 0.8125rem; /* 13px       */
    --svr-size-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 → 17px  */
    --svr-size-lead: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem); /* 17 → 21px  */
    --svr-size-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); /* 20 → 22px  */
    --svr-size-h3: clamp(1.375rem, 1.20rem + 0.8vw, 1.5rem); /* 22 → 24px  */
    --svr-size-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem); /* 28 → 40px  */
    --svr-size-h1: clamp(2rem, 1.40rem + 3.0vw, 2.875rem); /* 32 → 46px  */
    --svr-size-display: clamp(2.125rem, 1.10rem + 5.1vw, 5.5rem); /* 34 → 88px  */
    --svr-size-stat: clamp(1.75rem, 1.45rem + 1.5vw, 2.125rem); /* 28 → 34px  */

    --svr-leading-heading: 1.08;
    --svr-leading-body: 1.6;
    --svr-tracking-wide: 0.2em;

    /* ── Spacing ───────────────────────────────────────────────────────────── */
    /* The draft uses 10, 12 and 14px almost interchangeably — collapsed here
       into one step. Same for 24 and 28px.                                    */

    --svr-space-xs: 0.375rem; /*  6px */
    --svr-space-sm: 0.625rem; /* 10px */
    --svr-space-md: 1rem; /* 16px */
    --svr-space-lg: 1.75rem; /* 28px */
    --svr-space-xl: 3rem; /* 48px */
    --svr-space-section: clamp(2.5rem, 6vw, 5rem);

    /* ── Shapes and dimensions ─────────────────────────────────────────────── */

    --svr-radius: 8px; /* buttons, small cards          */
    --svr-radius-lg: 16px; /* image tiles                    */
    --svr-radius-xl: 20px; /* large panels                   */
    --svr-radius-pill: 999px;

    --svr-shell-max: 1440px;
    --svr-gutter: clamp(1.25rem, 4vw, 2.5rem); /* 20 → 40px */
    --svr-measure: 40rem; /* body text measure */
    --svr-tap: 44px; /* smallest tap target */

    /* ── Motion and focus ──────────────────────────────────────────────────── */

    --svr-transition: 150ms ease;
    --svr-focus-ring: 2px solid var(--svr-accent);
}

/* =============================================================================
   Light section

   Assigns the same names to different values. Components inside keep working
   unchanged — no second rule set is needed. In the draft this covers "Come by
   for a taster session" and "Our canteen".
   ========================================================================== */

.svr-light {
    --svr-surface-page: rgb(234, 240, 234);
    --svr-surface-header: rgb(243, 246, 244);
    --svr-surface-card: rgb(243, 246, 244);
    --svr-surface-deep: rgb(219, 228, 221);

    --svr-border: rgb(205, 215, 207);
    --svr-border-strong: rgb(183, 197, 186);

    /* The draft value rgb(116,133,120) only reaches 3.6 : 1 on a light
       surface. Secondary text therefore shares the value of "muted"
       (5.0 : 1). */
    --svr-text-faint: rgb(93, 110, 97);
    --svr-text-muted: rgb(93, 110, 97);
    --svr-text: rgb(60, 77, 64);
    --svr-text-strong: rgb(14, 37, 23);

    --svr-accent: var(--svr-link);
    --svr-accent-hover: var(--svr-link-hover);
    --svr-accent-text: rgb(243, 246, 244);

    --svr-error: var(--svr-error-light);
    --svr-success: var(--svr-success-light);

    --svr-focus-ring: 2px solid var(--svr-link);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --svr-transition: 0ms;
    }
}