/* ============================================================
   Dutch Bros Design System — Colors & Type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Bowlby+One+SC&family=Nunito:wght@400;600;700;800;900&family=Caveat:wght@500;700&display=swap');

:root {
  /* ----------------------------------------------------------
     CORE BRAND COLORS
     The Dutch Bros windmill blue + sun yellow are the soul.
     ---------------------------------------------------------- */
  --db-blue:        #006098;   /* Windmill blue — primary */
  --db-blue-deep:   #00477a;   /* Deeper blue for hovers / depth */
  --db-blue-ink:    #002a4a;   /* Near-black blue for headings */
  --db-yellow:      #FDE021;   /* Sun yellow — primary accent */
  --db-yellow-warm: #FFC629;   /* Warmer "rebel" yellow */
  --db-red:         #E03127;   /* Rebel red, classic-can red */
  --db-pink:        #F06EAA;   /* Soft Top pink, sticker pink */
  --db-mint:        #6FC9B7;   /* Soft Top mint */
  --db-orange:      #F26B3A;   /* Peach/orange accent */
  --db-cream:       #FFF8E1;   /* Cream background */

  /* ----------------------------------------------------------
     NEUTRALS
     ---------------------------------------------------------- */
  --db-white:       #FFFFFF;
  --db-paper:       #FFFCF2;   /* Off-white, slightly warm */
  --db-sand:        #F4EFE3;   /* Sandy neutral */
  --db-stone:       #D9D2C2;
  --db-gray-100:    #F5F4F1;
  --db-gray-200:    #E6E3DC;
  --db-gray-300:    #C7C3B9;
  --db-gray-500:    #807A6D;
  --db-gray-700:    #4A463E;
  --db-gray-900:    #1F1D18;
  --db-black:       #14110B;

  /* ----------------------------------------------------------
     SEMANTIC — FOREGROUND
     ---------------------------------------------------------- */
  --fg-1: var(--db-blue-ink);   /* primary text */
  --fg-2: var(--db-gray-700);   /* secondary text */
  --fg-3: var(--db-gray-500);   /* tertiary / captions */
  --fg-on-blue:   var(--db-yellow);
  --fg-on-yellow: var(--db-blue);
  --fg-inverse:   var(--db-paper);

  /* ----------------------------------------------------------
     SEMANTIC — BACKGROUND
     ---------------------------------------------------------- */
  --bg-1: var(--db-paper);
  --bg-2: var(--db-sand);
  --bg-3: var(--db-gray-100);
  --bg-brand:    var(--db-blue);
  --bg-accent:   var(--db-yellow);
  --bg-rebel:    var(--db-red);

  /* ----------------------------------------------------------
     SEMANTIC — STATE
     ---------------------------------------------------------- */
  --state-success: #2E8B57;
  --state-warning: #F2A93B;
  --state-error:   #E03127;
  --state-info:    var(--db-blue);

  /* ----------------------------------------------------------
     BORDERS, RADII, SHADOWS
     ---------------------------------------------------------- */
  --border-subtle:  1px solid var(--db-gray-200);
  --border-strong:  2px solid var(--db-blue-ink);
  --border-pill:    2px solid var(--db-blue);

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 42, 74, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 42, 74, 0.12);
  --shadow-lg: 0 12px 32px rgba(0, 42, 74, 0.18);
  --shadow-pop: 4px 4px 0 var(--db-blue-ink);   /* Sticker-style hard shadow */
  --shadow-pop-yellow: 4px 4px 0 var(--db-yellow);

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Display: Bowlby One — chunky, sticker-poster feel.
     Body:    Nunito — friendly, rounded, humanist sans.
     Script:  Caveat — handwritten accent for stickers/signage.
     (Substitutes for Dutch Bros' proprietary type — flag to user.)
     ---------------------------------------------------------- */
  --font-display: 'Bowlby One', 'Impact', 'Arial Black', sans-serif;
  --font-display-sc: 'Bowlby One SC', 'Bowlby One', sans-serif;
  --font-body:    'Nunito', 'Avenir Next', system-ui, sans-serif;
  --font-script:  'Caveat', 'Marker Felt', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — friendly, big, energetic */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;
  --text-6xl:  112px;

  --leading-tight: 1.0;
  --leading-snug:  1.15;
  --leading-body:  1.45;
  --leading-loose: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-shout:  0.08em;
}

/* ============================================================
   ELEMENT DEFAULTS — semantic shortcuts
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-weight: 600;             /* Dutch Bros body type runs heavy/friendly */
  -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

h1, .h1 { font-size: var(--text-5xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-shout);
  text-transform: uppercase;
  color: var(--db-blue);
}

.script {
  font-family: var(--font-script);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--db-blue);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
  font-weight: 600;
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-weight: 700;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--db-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   PRIMITIVE UTILITIES
   ============================================================ */
.db-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-shout);
  text-transform: uppercase;
}

.db-card {
  background: var(--db-white);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}