/*
 * ScoutBadger IdentityServer — Scouting Nederland huisstijl (v6.0 / scouting.nl v3).
 *
 * The same look as the manager app: Poppins, groen primary (titles, links,
 * band), blauw for navigation + solid pill buttons, oranje accent, paper/ink
 * neutrals, flat fills. Load order in every layout:
 *
 *   sb-tokens.css   generated `--sb-*` RGB channels (managerForest) — do not edit
 *   scouting-nl.css this file: fonts, semantic roles, legacy aliases
 *   onboarding.css / scoutbadger-theme.css   component styles, read the roles below
 *
 * Fonts are self-hosted (copied from clients/manager-expo/public/fonts, same
 * Google `unicode-range` splits) — no third-party font request.
 */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* ── Huisstijlkleuren ───────────────────────────────────────────── */
    --sn-rood:       rgb(var(--sb-bg-sn-rood));
    --sn-blauw:      rgb(var(--sb-bg-sn-blauw));
    --sn-geel:       rgb(var(--sb-bg-sn-geel));
    --sn-groen:      rgb(var(--sb-bg-sn-groen));
    --sn-oranje:     rgb(var(--sb-bg-sn-oranje));
    --sn-paars:      rgb(var(--sb-bg-sn-paars));
    --sn-lichtblauw: rgb(var(--sb-bg-sn-lichtblauw));

    /* ── Semantic roles (identical to the manager) ──────────────────── */
    --color-primary:        rgb(var(--sb-bg-primary));
    --color-primary-hover:  rgb(var(--sb-bg-primary-hover));
    --color-primary-soft:   rgb(var(--sb-bg-primary-soft));
    --color-primary-border: rgb(var(--sb-bg-primary-border));
    --color-action:         rgb(var(--sb-bg-action));
    --color-action-hover:   rgb(var(--sb-bg-action-hover));
    --color-nav:            rgb(var(--sb-bg-nav));
    --color-nav-active-bg:  rgb(var(--sb-bg-nav-activeBg));
    --color-intro:          rgb(var(--sb-bg-intro));
    --color-band:           rgb(var(--sb-bg-band));
    --color-panel:          rgb(var(--sb-bg-panel));
    --color-accent:         rgb(var(--sb-bg-accent));
    --color-accent-hover:   rgb(var(--sb-bg-accent-hover));
    --color-accent-soft:    rgb(var(--sb-bg-accent-soft));
    --color-heading:        rgb(var(--sb-bg-heading));
    --color-link:           rgb(var(--sb-bg-link));
    --color-link-hover:     rgb(var(--sb-bg-linkHover));

    --surface:          rgb(var(--sb-bg-surface));
    --surface-alt:      rgb(var(--sb-bg-surface-alt));
    --surface-muted:    rgb(var(--sb-bg-surface-muted));
    --surface-page:     rgb(var(--sb-bg-surface-page));
    --ink:              rgb(var(--sb-bg-ink));
    --ink-2:            rgb(var(--sb-bg-ink-muted));
    --ink-3:            rgb(var(--sb-bg-ink-subtle));
    --ink-4:            rgb(var(--sb-bg-inkFaint));
    --on-dark:          rgb(var(--sb-bg-onDark));
    --border-default:   rgb(var(--sb-bg-border));
    --border-strong:    rgb(var(--sb-bg-border-strong));
    --border-subtle:    rgb(var(--sb-bg-border-subtle));

    --success:       rgb(var(--sb-bg-success));
    --success-light: rgb(var(--sb-bg-success-light));
    --success-dark:  rgb(var(--sb-bg-success-dark));
    --warning:       rgb(var(--sb-bg-warning));
    --warning-light: rgb(var(--sb-bg-warning-light));
    --warning-dark:  rgb(var(--sb-bg-warning-dark));
    --info:          rgb(var(--sb-bg-info));
    --info-light:    rgb(var(--sb-bg-info-light));
    --info-dark:     rgb(var(--sb-bg-info-dark));
    --danger:        rgb(var(--sb-bg-danger));
    --danger-light:  rgb(var(--sb-bg-danger-light));
    --danger-dark:   rgb(var(--sb-bg-danger-dark));
    --danger-border: rgb(var(--sb-bg-danger-border));
    --ceremony:      rgb(var(--sb-bg-ceremony));

    /* ── Shape, elevation, focus (managerScales) ────────────────────── */
    --radius-input:   4px;
    --radius-sm:      6px;
    --radius-md:      8px;
    --radius-trigger: 10px;
    --radius-lg:      12px;
    --radius-pill:    9999px;
    --border-width:   1.5px;
    --shadow-s:  var(--sb-shadow-s);
    --shadow-m:  var(--sb-shadow-m);
    --shadow-l:  var(--sb-shadow-l);
    --shadow-xl: var(--sb-shadow-xl);
    --focus-ring: 0 0 0 3px rgb(var(--sb-bg-primary) / .30);

    /* ── Type ───────────────────────────────────────────────────────── */
    --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-display: var(--font-body);
    --font-stat:    'Anton', Impact, 'Arial Narrow', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ── Brand imagery ──────────────────────────────────────────────── */
    --bg-pattern: url('../img/bg-groen.png');

    /* ── Motion ─────────────────────────────────────────────────────── */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── DEPRECATED "forest camp" aliases ───────────────────────────────
       The v1 names onboarding.css / scoutbadger-theme.css / page markup
       still read, resolved onto the huisstijl the same way the design
       system's colors_and_type.css does. Don't use them in new work. */
    --forest:          var(--color-heading);
    --forest-light:    var(--color-primary-hover);
    --forest-muted:    var(--color-primary-hover);
    --moss:            var(--color-primary);
    --sage:            var(--color-primary-border);
    --sage-light:      var(--color-primary-border);
    --meadow:          var(--color-primary-soft);
    --cream:           var(--surface-alt);
    --warm-white:      var(--surface-page);
    --sand:            var(--surface-muted);
    --bark:            var(--ink-2);
    --bark-light:      var(--ink-3);
    --campfire:        var(--color-accent);
    --campfire-glow:   var(--color-accent);
    --campfire-dim:    var(--color-accent-hover);
    --ember:           var(--danger);
    --sky:             var(--info);
    --fg-1:            var(--ink);
    --fg-2:            var(--ink-2);
    --fg-3:            var(--ink-3);

    --sb-forest:        var(--forest);
    --sb-forest-light:  var(--forest-light);
    --sb-forest-muted:  var(--forest-muted);
    --sb-moss:          var(--moss);
    --sb-sage-light:    var(--sage-light);
    --sb-cream:         var(--cream);
    --sb-warm-white:    var(--warm-white);
    --sb-bark:          var(--bark);
    --sb-bark-light:    var(--bark-light);
    --sb-campfire:      var(--campfire);
    --sb-campfire-dim:  var(--campfire-dim);
    --sb-ember:         var(--ember);
    --sb-sky:           var(--sky);
    --sb-fg-1:          var(--fg-1);
    --sb-fg-2:          var(--fg-2);
    --sb-fg-3:          var(--fg-3);
    --sb-border:        var(--border-default);
    --sb-border-subtle: var(--border-subtle);
    --sb-border-strong: var(--border-strong);
    --sb-font-display:  var(--font-display);
    --sb-font-body:     var(--font-body);
}