/* ============================================
   SVENSKA SCOUTERNA — DESIGN TOKENS
   Source: Scouterna Grafisk Profil v1.1 (2018) + scouterna.se
   ============================================ */

/* Libre Franklin as modern web-friendly stand-in for Tee Franklin / Franklin Gothic.
   EB Garamond as web-safe stand-in for Adobe Garamond Pro. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

:root {
  /* ---- PRIMARY: Scoutblå ---- */
  --scout-blue:      #003660;  /* PANTONE 2955C — the master color */
  --scout-blue-900:  #00243f;
  --scout-blue-800:  #002c50;
  --scout-blue-700:  #003660;
  --scout-blue-600:  #1b4a74;
  --scout-blue-500:  #3a6389;
  --scout-blue-400:  #6a8aab;
  --scout-blue-300:  #a7bccf;
  --scout-blue-200:  #d2dde8;
  --scout-blue-100:  #e8eef4;
  --scout-blue-50:   #f3f6fa;

  /* ---- AGE-GROUP / SECONDARY ---- */
  --spaer-green:     #41A62A;  /* Spårare 8–10, PANTONE 361C */
  --upp-blue:        #00A8E1;  /* Upptäckare 10–12, PANTONE 2995C */
  --avent-orange:    #E95F13;  /* Äventyrare 12–15, PANTONE 166C */
  --utm-pink:        #DA005E;  /* Utmanare 15–18, PANTONE Rubine Red C */
  --rover-yellow:    #E2E000;  /* Rover 19–25, PANTONE 396C */
  --rover-dark:      #837A02;  /* Text color on rovergul, PANTONE 392C */

  /* ---- NEUTRALS ---- */
  --black:           #282727;  /* Neutral Black C */
  --white:           #ffffff;
  --gray-950: #1a1a1a;
  --gray-900: #282727;
  --gray-800: #3d3d3d;
  --gray-700: #525252;
  --gray-600: #6b6b6b;
  --gray-500: #8a8a8a;
  --gray-400: #adadad;
  --gray-300: #d0d0d0;
  --gray-200: #e5e5e5;
  --gray-100: #f2f2f2;
  --gray-50:  #f8f8f7;

  /* ---- SEMANTIC ---- */
  --bg:             #ffffff;
  --bg-muted:       #f8f8f7;
  --bg-inverse:     #003660;
  --fg1:            #282727;
  --fg2:            #525252;
  --fg3:            #8a8a8a;
  --fg-on-blue:     #ffffff;
  --border:         #e5e5e5;
  --border-strong:  #d0d0d0;
  --primary:        #003660;
  --primary-hover:  #002c50;
  --primary-fg:     #ffffff;
  --accent:         #E95F13;
  --success:        #41A62A;
  --warning:        #E95F13;
  --error:          #DA005E;
  --info:           #00A8E1;

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Libre Franklin', -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Libre Franklin', -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'EB Garamond', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — display uses ultralight per brand book */
  --text-hero:   88px;  --ln-hero:  0.95; --tr-hero:  -0.02em;
  --text-d1:     64px;  --ln-d1:    1.0;  --tr-d1:    -0.02em;
  --text-d2:     48px;  --ln-d2:    1.05; --tr-d2:    -0.015em;
  --text-h1:     36px;  --ln-h1:    1.15; --tr-h1:    -0.01em;
  --text-h2:     28px;  --ln-h2:    1.2;  --tr-h2:    -0.005em;
  --text-h3:     22px;  --ln-h3:    1.3;
  --text-h4:     18px;  --ln-h4:    1.4;
  --text-body:   16px;  --ln-body:  1.6;
  --text-sm:     14px;
  --text-xs:     12px;  --tr-over:  0.12em;

  /* ---- SPACING (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ---- RADII ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-xs: 0 1px 2px rgba(0, 54, 96, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 54, 96, 0.06), 0 1px 2px rgba(0,54,96,0.04);
  --shadow-md: 0 6px 12px rgba(0, 54, 96, 0.08), 0 2px 4px rgba(0,54,96,0.04);
  --shadow-lg: 0 16px 32px rgba(0, 54, 96, 0.12), 0 4px 8px rgba(0,54,96,0.04);
  --shadow-ring: 0 0 0 4px rgba(0, 168, 225, 0.25);

  /* ---- MOTION ---- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--ln-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Type classes */
.t-hero     { font-family: var(--font-display); font-weight: 200; font-size: var(--text-hero); line-height: var(--ln-hero); letter-spacing: var(--tr-hero); }
.t-d1       { font-family: var(--font-display); font-weight: 200; font-size: var(--text-d1);   line-height: var(--ln-d1);   letter-spacing: var(--tr-d1); }
.t-d2       { font-family: var(--font-display); font-weight: 300; font-size: var(--text-d2);   line-height: var(--ln-d2);   letter-spacing: var(--tr-d2); }
.t-h1       { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h1);   line-height: var(--ln-h1);   letter-spacing: var(--tr-h1); }
.t-h2       { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2);   line-height: var(--ln-h2); }
.t-h3       { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3);   line-height: var(--ln-h3); }
.t-h4       { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4);   line-height: var(--ln-h4); }
.t-body     { font-size: var(--text-body); line-height: var(--ln-body); }
.t-serif    { font-family: var(--font-serif); font-size: 18px; line-height: 1.65; }
.t-sm       { font-size: var(--text-sm); }
.t-xs       { font-size: var(--text-xs); }
.t-over     { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tr-over); font-weight: 700; }
.t-mono     { font-family: var(--font-mono); }
.t-muted    { color: var(--fg3); }