/* =====================================================================
   Trail Life Troop TX-1333 — Design System Tokens
   Source: 2024 Trail Life USA Brand Standards & Style Guide
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ---------- PRIMARY BRAND COLORS ---------------------------------- */
  --tl-red:           #ba262d;
  --tl-brown:         #876237;
  --tl-black:         #010101;
  --tl-white:         #ffffff;

  /* ---------- SECONDARY (warm) -------------------------------------- */
  --tl-orange:        #f49322;
  --tl-burnt-orange:  #d25a27;
  --tl-deep-red:      #6c162b;
  --tl-tan:           #9b7a54;
  --tl-sand:          #d8ccb7;
  --tl-bark:          #3e2e18;

  /* ---------- SECONDARY (cool) -------------------------------------- */
  --tl-leaf:          #728e38;
  --tl-forest:        #34441c;
  --tl-lake:          #005c85;
  --tl-deep-lake:     #003b59;
  --tl-sky:           #4fa7c5;

  /* ---------- NEUTRALS ---------------------------------------------- */
  --tl-gray-85:       #4d4d4f;
  --tl-gray-65:       #77787b;
  --tl-gray-40:       #a7a9ac;
  --tl-gray-20:       #d1d3d4;
  --tl-gray-10:       #e9eaeb;
  --tl-paper:         #faf7f2;

  /* ---------- SEMANTIC — surfaces & ink ----------------------------- */
  --bg:               var(--tl-paper);
  --bg-alt:           #f3ede2;
  --bg-deep:          var(--tl-bark);
  --bg-night:         #1c1408;
  --surface:          #ffffff;
  --surface-raised:   #ffffff;

  --fg1:              var(--tl-black);
  --fg2:              var(--tl-gray-85);
  --fg3:              var(--tl-gray-65);
  --fg-on-dark:       #ffffff;
  --fg-on-dark-2:     rgba(255,255,255,0.78);

  --accent:           var(--tl-red);
  --accent-2:         var(--tl-brown);
  --accent-warm:      var(--tl-orange);

  --border:           rgba(60, 40, 20, 0.14);
  --border-strong:    rgba(60, 40, 20, 0.28);
  --divider:          rgba(60, 40, 20, 0.08);

  /* ---------- SEMANTIC — feedback ----------------------------------- */
  --success:          var(--tl-leaf);
  --success-bg:       #eaf0d8;
  --warning:          var(--tl-orange);
  --warning-bg:       #fdecd0;
  --danger:           var(--tl-red);
  --danger-bg:        #f6dadb;
  --info:             var(--tl-lake);
  --info-bg:          #d6e7ef;

  /* ---------- TYPOGRAPHY -------------------------------------------- */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --font-display: "Open Sans", system-ui, sans-serif;

  --fs-overline:   12px;
  --fs-caption:    13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-h6:         16px;
  --fs-h5:         18px;
  --fs-h4:         22px;
  --fs-h3:         28px;
  --fs-h2:         36px;
  --fs-h1:         48px;
  --fs-display:    72px;

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  --ls-caps:       0.08em;
  --ls-tight:      -0.01em;
  --ls-normal:     0;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ---------- SPACING ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- RADII ------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---------- ELEVATION --------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(62, 46, 24, 0.08);
  --shadow-2: 0 2px 6px rgba(62, 46, 24, 0.10), 0 1px 2px rgba(62,46,24,0.06);
  --shadow-3: 0 8px 18px rgba(62, 46, 24, 0.12), 0 2px 4px rgba(62,46,24,0.06);
  --shadow-4: 0 18px 36px rgba(62, 46, 24, 0.18), 0 4px 8px rgba(62,46,24,0.08);
  --ring-focus: 0 0 0 3px rgba(186, 38, 45, 0.30);

  /* ---------- MOTION ------------------------------------------------ */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* ---------- BACKWARD-COMPATIBLE ALIASES --------------------------- */
  /* Maps old variable names (style.css) to design system tokens        */
  --crimson:        var(--tl-red);
  --crimson-dark:   #961f24;
  --clay:           var(--tl-brown);
  --clay-light:     #a07a4f;
  --dark-brown:     var(--tl-bark);
  --parchment:      #F5EEE3;
  --parchment-dark: #E8DFD0;
  --peach-light:    #FFEDE6;
  --white:          #ffffff;
  --text:           var(--tl-bark);
  --text-secondary: #6b5d4f;
  --orange:         var(--tl-orange);
  --green:          var(--tl-leaf);
  --blue:           var(--tl-lake);
  --light-blue:     var(--tl-sky);
  --tan:            var(--tl-sand);
  --dark-green:     var(--tl-forest);
  --deep-red:       var(--tl-deep-red);
  --deep-blue:      var(--tl-deep-lake);
  --shadow-sm:      var(--shadow-1);
  --shadow:         var(--shadow-2);
  --shadow-lg:      var(--shadow-3);
  --radius:         var(--r-lg);
}

/* =====================================================================
   DARK MODE
   ===================================================================== */
[data-theme="dark"] {
  /* Surfaces */
  --bg:             #1a1a1a;
  --bg-alt:         #141414;
  --bg-deep:        #111111;
  --bg-night:       #0a0a0a;
  --surface:        #242424;
  --surface-raised: #2a2a2a;

  /* Ink */
  --fg1:            #e0d6c8;
  --fg2:            #a89b8c;
  --fg3:            #7a6e60;

  /* Borders */
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --divider:        rgba(255, 255, 255, 0.05);

  /* Feedback */
  --success-bg:     #1a2a10;
  --warning-bg:     #2a2000;
  --danger-bg:      #2a1010;
  --info-bg:        #0a1a2a;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-3: 0 8px 18px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-4: 0 18px 36px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0,0,0,0.3);

  /* Backward-compatible aliases for dark mode */
  --parchment:      #1a1a1a;
  --parchment-dark: #141414;
  --white:          #242424;
  --text:           #e0d6c8;
  --text-secondary: #a89b8c;
  --dark-brown:     #1a1510;
  --shadow-sm:      var(--shadow-1);
  --shadow:         var(--shadow-2);
  --shadow-lg:      var(--shadow-3);
}

/* =====================================================================
   SEMANTIC CLASSES
   ===================================================================== */

.tl-h1, h1.tl, .tl-headline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg1);
  margin: 0;
}
.tl-h2, h2.tl {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}
.tl-h3, h3.tl {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}
.tl-subhead, .tl-h4, h4.tl {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}
.tl-body, p.tl {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0;
}
.tl-callout {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}
.tl-overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-overline);
  line-height: 1;
  color: var(--fg2);
}
.tl-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg3);
  line-height: var(--lh-normal);
}

.tl-verse {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
.tl-verse cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-caption);
  color: var(--tl-red);
}