/* =========================================================
   BEVERBENDE — Colors & Type
   ---------------------------------------------------------
   Beverbende is a digital companion for the AMIGO card game
   "Biberbande" (a.k.a. Beverbende). The visual language is
   playful, kid‑friendly, cartoon‑bold: heavy black outlines,
   saturated primaries, and slightly tilted display type.
   ========================================================= */

/* ---------- WEBFONTS ---------- */
/* Display: Luckiest Guy (heavy outlined display) — substituted
   from Google Fonts. The original printed Biberbande wordmark on
   the card box is hand-drawn and slightly thicker; flag for the
   user to provide a custom font file if pixel parity is needed. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=Nunito:wght@400;600;700;800;900&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* =========================================================
     COLOR — RAW PALETTE
     Heavy black outlines are what make these colors "pop";
     never use a color without thinking about its 3px black border.
     ========================================================= */
  --biber-orange:   #FF5300;  /* Primary — buttons, characters, brand */
  --sky-blue:       #1CCBD6;  /* Secondary — backgrounds, calm UI */
  --grass-green:    #B0BA5B;  /* Success — confirmations, progress */
  --accent-red:     #CC062F;  /* Alerts, sale, critical */
  --active-blue:    #086E78;  /* Power-up / pressed-state deep blue */
  --page-white:     #FFFFFF;  /* Cards, surfaces */
  --deep-black:     #000000;  /* Text, the famous 3px borders */

  /* Tints (used sparingly, for fills behind black outlines) */
  --sky-blue-tint:  #E8F8FA;  /* Page wash, very light card bg */
  --orange-tint:    #FFE9DC;  /* Subtle orange wash */
  --green-tint:     #EEF1D6;
  --red-tint:       #F9DCE2;

  /* Shades (darker variants for press/hover shadow color) */
  --biber-orange-shade: #C73F00;
  --sky-blue-shade:     #15A4AC;
  --grass-green-shade:  #8C9444;

  /* =========================================================
     SEMANTIC COLOR
     ========================================================= */
  --bg:             var(--sky-blue-tint);
  --bg-deep:        var(--sky-blue);
  --surface:        var(--page-white);
  --surface-soft:   var(--sky-blue-tint);

  --fg:             var(--deep-black);
  --fg-muted:       #3A3A3A;
  --fg-soft:        #6B6B6B;
  --fg-on-color:    var(--page-white);   /* white on orange/red/blue */
  --fg-on-light:    var(--deep-black);   /* black on white/sky tint */

  --primary:        var(--biber-orange);
  --primary-fg:     var(--page-white);
  --secondary:      var(--sky-blue);
  --secondary-fg:   var(--deep-black);
  --success:        var(--grass-green);
  --success-fg:     var(--deep-black);
  --danger:         var(--accent-red);
  --danger-fg:      var(--page-white);

  --border:         var(--deep-black);     /* Always black */
  --border-soft:    rgba(0,0,0,0.15);

  /* =========================================================
     TYPE — RAW
     ========================================================= */
  --font-display:   "Luckiest Guy", "Bangers", "Impact", system-ui, sans-serif;
  --font-display-alt: "Bangers", "Luckiest Guy", "Impact", system-ui, sans-serif;
  --font-body:      "Nunito", "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-alt:  "Quicksand", "Nunito", system-ui, sans-serif;

  /* Sizes (display is set BIG; body uses a friendly 16px base) */
  --fs-display:    72px;
  --fs-h1:         48px;
  --fs-h2:         34px;
  --fs-h3:         24px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-small:      14px;
  --fs-tiny:       12px;

  /* Weights (Nunito carries up to 900) */
  --fw-body:       500;
  --fw-bold:       800;
  --fw-black:      900;

  /* Line heights — looser for body, tight for display */
  --lh-display:    0.95;
  --lh-heading:    1.1;
  --lh-body:       1.5;

  /* Letter spacing — display all-caps gets a touch of negative
     tracking; body stays neutral */
  --ls-display:    0.5px;
  --ls-body:       0;

  /* Display tilt — Biberbande wordmark sits between 2°–5° */
  --display-tilt:  -3deg;

  /* =========================================================
     SHAPE & EFFECT TOKENS (used by other CSS but defined here
     for reference)
     ========================================================= */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   22px;   /* Cards: 20px+ for that soft, kid-friendly feel */
  --r-xl:   32px;
  --r-pill: 999px;

  --bw:     3px;    /* Standard black border */
  --bw-thick: 4px;  /* On bigger cards / hero elements */

  /* Hard-edge drop shadow — NOT blurred. This is the signature. */
  --shadow-hard:    4px 4px 0 0 var(--deep-black);
  --shadow-hard-lg: 6px 6px 0 0 var(--deep-black);
  --shadow-hard-sm: 2px 2px 0 0 var(--deep-black);
  /* Colored hard shadow — use the deeper shade of the element color */
  --shadow-hard-orange: 4px 4px 0 0 var(--biber-orange-shade);
  --shadow-hard-blue:   4px 4px 0 0 var(--sky-blue-shade);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Apply directly to elements via class or @extend pattern.
   ========================================================= */

.bvb-display,
.bvb-h1,
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;          /* Luckiest Guy is single-weight */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  text-transform: uppercase;
  margin: 0;
}

.bvb-display {
  font-size: var(--fs-display);
  /* Tilt is on individual instances — see component examples */
}

.bvb-h2,
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.bvb-h3,
h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0;
}

.bvb-body,
p,
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.bvb-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.bvb-body-secondary {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--fg-soft);
  line-height: var(--lh-body);
}

.bvb-label,
.bvb-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.bvb-tiny {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-body);
  color: var(--fg-soft);
}

/* The signature "tilted display chunk" — useful for hero titles */
.bvb-display-tilt {
  display: inline-block;
  transform: rotate(var(--display-tilt));
  transform-origin: center;
}

/* "Outlined" display text — black stroke around white fill, like the
   Biberbande logo itself. Use sparingly. */
.bvb-display-outline {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--page-white);
  -webkit-text-stroke: 3px var(--deep-black);
  text-shadow:
    3px 3px 0 var(--deep-black);
  paint-order: stroke fill;
}