/* =========================================================
   BobaBot Design System — Colors & Type
   ---------------------------------------------------------
   Two MODES (do not mix randomly within one screen):
     ONE TYPE SYSTEM:
     Poppins (display + headings) · Nunito (body) · JetBrains Mono (kicker labels, prices)
     SURFACES:
     Cool app BG (#F5F7FB) for product UI · lilac (#EFE6EF) + ink (#181014) for signage moments
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ───────── CORE BRAND IDENTITY (always allowed) ─────────
     Print specs (per Brand Portal v1.0):
       Primary Purple #3f157e    → Pantone 2685 C
       Primary Light  #51209b    → Dulux S 3555-R60B
       Accent Pink    #e06baf    → CMYK C13 M69 Y0 K0 · RAL 4003
     Use these for any printed merch, signage, cup print.
  */
  --bb-purple:        #3f157e;  /* Primary Purple — buttons, key surfaces · Pantone 2685 C */
  --bb-purple-light:  #51209b;  /* Hover/lifted purple · Dulux S 3555-R60B */
  --bb-purple-dark:   #2d0f5a;  /* Deep purple — heading text on cool/white BG */
  --bb-pink:          #e06baf;  /* Accent pink · CMYK 13/69/0/0 · RAL 4003 */
  --bb-pink-soft:     #f4b8d0;  /* Soft pink — italic word inside dark CTAs */
  --bb-pink-deep:     #b34a87;  /* Editorial accent — italic word in pink, used sparingly */

  /* ───────── MODE A · Product UI surfaces (cool, modern) ─────────
     One BG color across all Mode A surfaces (kiosk-touch, admin, app).
     Warm tones are reserved for print/packaging only — never product UI.
  */
  --bb-bg:            #f5f7fb;  /* PRIMARY app/admin/kiosk BG — cool gray-blue */
  --bb-bg-2:          #eaeef5;  /* Secondary panel BG / hover, dense areas */
  --bb-bg-cool:       #f5f7fb;  /* Alias for --bb-bg (back-compat) */
  --bb-white:         #ffffff;  /* Cards, modals, foreground surfaces */
  --bb-border:        #dfe5f0;  /* Default 1px border on cool BG */
  --bb-border-soft:   #ecf0f6;  /* Subtle internal divider */
  /* Warm tone — print/packaging only, NEVER product UI */
  --bb-print-warm:   #fcf6e5;  /* Posters, packaging, paper sleeves */
  /* Legacy aliases — kept for back-compat with old code */
  --bb-bg:         #f5f7fb;
  --bb-panel-bg:       #eaeef5;
  --bb-panel-hover:   #ecf0f6;
  --bb-border:   #dfe5f0;

  /* ───────── MODE B · Editorial surfaces (signage, decks) ───────── */
  --bb-lilac:         #efe6ef;  /* Lilac signage BG */
  --bb-lilac-2:       #e8dce8;  /* Lilac alt */
  --bb-ink:           #181014;  /* Warm-tinted near-black, NOT pure black */
  --bb-ink-soft:      #4a3a42;  /* Secondary editorial text */
  --bb-muted:         #8a7982;  /* Tertiary / micro-labels */
  --bb-bezel:         #0a0a0b;  /* Physical-screen bezel divider */
  --bb-rule:          rgba(24,16,20,0.10); /* Editorial 1px rule */

  /* ───────── TEXT (Mode A) ───────── */
  --bb-text:          #1f1146;  /* Body & headings on cool/white — slightly darker for contrast */
  --bb-text-secondary:#4a4565;  /* Captions / subtitles */
  --bb-text-muted:    #8478a0;  /* Disabled / fine print */

  /* ───────── SEMANTIC (status, alerts) ───────── */
  --bb-success:       #1d7a4a;
  --bb-success-bg:    #d1fae5;
  --bb-warning:       #9d2f74;  /* WARN uses pink family — never orange/brown */
  --bb-warning-bg:    #fce7f3;
  --bb-error:         #b91c1c;
  --bb-error-bg:      #fee2e2;
  --bb-info:          #1e40af;
  --bb-info-bg:       #dbeafe;

  /* ───────── EDITORIAL ACCENT DOTS ───────── */
  --bb-mint:          #9eff9e;  /* "NOW / LIVE" pulsing dot */
  --bb-mint-glow:     rgba(158,255,158,0.22);

  /* ───────── TYPOGRAPHY FAMILIES ───────── */
  --bb-font-heading:  'Poppins', system-ui, sans-serif;          /* Mode A headings */
  --bb-font-body:     'Nunito', system-ui, sans-serif;            /* Mode A body */
  --bb-font-display:  'Poppins', system-ui, sans-serif;             /* Display = Poppins (DM Serif retired) */
  --bb-font-editorial:'Nunito', system-ui, sans-serif;              /* Editorial body = Nunito (Inter retired) */
  --bb-font-mono:     'JetBrains Mono', ui-monospace, monospace;  /* Prices, meta, numerals */

  /* ───────── GEOMETRY ───────── */
  --bb-radius-xs:   4px;
  --bb-radius-sm:   8px;
  --bb-radius-md:  12px;   /* Cards, modals — Mode A */
  --bb-radius-lg:  18px;   /* Editorial cards / strips — Mode B */
  --bb-radius-input:10px;
  --bb-radius-pill:999px;  /* Buttons, pills, tags */

  /* ───────── SPACING SCALE (4-pt) ───────── */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-space-7: 48px;
  --bb-space-8: 64px;

  /* ───────── ELEVATION ───────── */
  --bb-shadow-xs: 0 1px 2px rgba(45,15,90,0.06);
  --bb-shadow-sm: 0 2px 8px rgba(45,15,90,0.06);
  --bb-shadow-md: 0 4px 20px rgba(45,15,90,0.08);   /* Cards (Mode A) */
  --bb-shadow-lg: 0 12px 40px rgba(45,15,90,0.12);  /* Modals, lifted CTAs */
  --bb-shadow-pop: 0 6px 0 0 var(--bb-purple-dark); /* Optional press-down "stamp" */

  /* ───────── MOTION ───────── */
  --bb-ease:      cubic-bezier(.2,.7,.2,1);
  --bb-ease-out:  cubic-bezier(.16,1,.3,1);
  --bb-dur-fast:  120ms;
  --bb-dur:       200ms;
  --bb-dur-slow:  360ms;
}

/* =========================================================
   SEMANTIC TYPE — Mode A (Product UI)
   Default for the app, kiosk, admin.
   ========================================================= */
.bb-h1 { font-family: var(--bb-font-heading); font-weight: 800; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--bb-purple); }
.bb-h2 { font-family: var(--bb-font-heading); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; color: var(--bb-text); }
.bb-h3 { font-family: var(--bb-font-heading); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--bb-text); }
.bb-h4 { font-family: var(--bb-font-heading); font-weight: 600; font-size: 18px; line-height: 1.3;  color: var(--bb-text); }
.bb-eyebrow { font-family: var(--bb-font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-purple); }
.bb-body  { font-family: var(--bb-font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--bb-text); }
.bb-body-sm { font-family: var(--bb-font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--bb-text-secondary); }
.bb-caption { font-family: var(--bb-font-body); font-weight: 300; font-size: 12px; line-height: 1.4; color: var(--bb-text-secondary); }
.bb-price { font-family: var(--bb-font-heading); font-weight: 700; font-size: 22px; color: var(--bb-purple); }
.bb-button-label { font-family: var(--bb-font-heading); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; }

/* =========================================================
   SEMANTIC TYPE — Mode B (Editorial / Signage / Deck Hero)
   Use ONLY in branded zones, never in dense data.
   ========================================================= */
.bb-display    { font-family: var(--bb-font-heading); font-weight: 600; font-size: 64px; line-height: 0.98; letter-spacing: -0.025em; color: var(--bb-ink); }
.bb-display em { color: var(--bb-pink-deep); font-style: italic; font-weight: 500; }
.bb-editorial-h2 { font-family: var(--bb-font-heading); font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; color: var(--bb-ink); }
.bb-editorial-body { font-family: var(--bb-font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--bb-ink-soft); }
.bb-meta  { font-family: var(--bb-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bb-muted); }
.bb-mono-price { font-family: var(--bb-font-mono); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--bb-ink); }
.bb-mono-tag   { font-family: var(--bb-font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-ink-soft); }

/* =========================================================
   FOCUS RING — accessibility baseline
   Visible focus state required on every interactive control.
   ========================================================= */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--bb-pink);
  outline-offset: 2px;
  border-radius: var(--bb-radius-sm);
}