/* ===================================================================

   BoozeButler / Halytic Design System v1.0

   UI System — Typography, Layout, Cards, Buttons, Inputs, Utilities

   =================================================================== */



/* ===============================================================

   SYSTEM — GLOBAL RULES
   Phase C (Chunk 120): Backgrounds + Hero cleanup

   =============================================================== */

/* ---------------------------------------------
   LIGHT BACKGROUND CONSISTENCY
   from all-pages-width-fix.css and ui-layout-fixes
   --------------------------------------------- */
body,
.bb-layout,
.bb-main,
.bb-page,
.round-builder-page,
[class*="card"] {
  background: var(--bb-bg-light, #f7f3ef) !important;
  color: var(--bb-text-strong, #2d2926);
}

/* Fix for accidental dark elements */
[style*="background: #1a1a1a"],
[style*="background:#1a1a1a"],
[style*="background: #1E1A17"],
[style*="background:#1E1A17"],
[style*="background: #2b241c"],
[style*="background:#2b241c"] {
  background: var(--bb-bg-light, #f7f3ef) !important;
  color: var(--bb-text-strong, #2d2926) !important;
}

/* ---------------------------------------------
   HOME HERO — remove excessive padding
   --------------------------------------------- */
.home-hub {
  padding: 24px !important;
  margin-top: 0 !important;
}

.home-hero {
  padding: 0 !important;
  margin-bottom: 48px !important;
}

.home-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 17, 24, 0.4),
    rgba(15, 17, 24, 0.15),
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

.home-hero h1,
.home-hero p {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(15,17,24,0.3);
}

/* ---------------------------------------------
   COMMAND PALETTE DISCOVERABILITY MESSAGE
   --------------------------------------------- */
.home-hero::after {
  content: "Press ⌘K (Ctrl+K on Windows) to search recipes, favorites, and history.";
  display: block;
  margin-top: 16px;
  font-size: 0.875rem;
  opacity: 0.7;
}

/* ---------------------------------------------------------------

   0. Modern Reset

   --------------------------------------------------------------- */

*,

*::before,

*::after {

  box-sizing: border-box;

}



html, body {

  margin: 0;

  padding: 0;

}



/* ============================================

   TYPOGRAPHY — GLOBAL TOKEN MIGRATION

   ============================================ */

/* PAGE TITLES */
.bb-page-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* HEADER TITLES - CHUNK 160: Standardized to match Mocktail Builder */
.bb-header-title {
  font-size: var(--font-size-xl, 1.25rem) !important; /* Match ui-navigation.css for consistency */
  font-weight: var(--weight-semibold, 600) !important; /* Match ui-navigation.css for consistency */
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  text-transform: none !important; /* Ensure no case transformation */
  color: var(--bb-text-strong, #2d2926) !important; /* CHUNK 160: Ensure consistent text color */
}

/* SECTION TITLES */
.bb-section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* CARD TITLES */
.bb-card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* BODY TEXT */
p, li, .text-body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

/* LABELS */
label, .form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

/* META TEXT */
.meta, .text-muted, small {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

/* BUTTON TEXT */
button, .btn {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ============================================

   TYPOGRAPHY UTILITIES (Unified)

   ============================================ */

/* Typography utility classes */
.bb-text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.bb-text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.bb-text-md {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.bb-text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

.bb-text-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-base);
}

/* ---------------------------------------------

   GLOBAL SPACING TOKENS (merged from polish files)

   --------------------------------------------- */

:root {

  --bb-space-xs: 4px;

  --bb-space-sm: 8px;

  --bb-space-md: 16px;

  --bb-space-lg: 24px;

  --bb-space-xl: 32px;

  --bb-section-spacing: 32px;

  --bb-internal-spacing: 16px;

  /* Typography sizes */

  --bb-h1-size: 36px;

  --bb-h2-size: 28px;

  --bb-h3-size: 20px;

  --bb-body-size: 15px;

  --bb-body-size-large: 16px;

  /* Brand colors */

  --bb-deep: #0F1118;

  --bb-gold: #BFA05A;

  --bb-rose: #E85D75;

  --bb-cream: #F4E8D3;

  --bb-white: #FFFFFF;

  /* Card Tokens */

  --bb-radius-card: 12px;

  --bb-radius-card-lg: 16px;

  --bb-shadow-card: 0 2px 8px rgba(0,0,0,0.1),

                    0 4px 16px rgba(0,0,0,0.08);

  --bb-shadow-card-hover: 0 4px 12px rgba(0,0,0,0.15),

                          0 8px 24px rgba(0,0,0,0.1);

  /* Typography Tokens */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-base: 1.4;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* Base font */

  font-family: var(--font-ui);

  font-size: var(--font-size-md);

}

/* ---------------------------------------------

   TYPOGRAPHY — Unified global rules

   (merged from ui-professional-polish, chunk113-polish)

   --------------------------------------------- */

h1, .h1 {

  font-family: 'Playfair Display', serif;

  font-size: var(--font-size-3xl);

  font-weight: var(--font-weight-bold);

  line-height: var(--line-height-tight);

  color: var(--bb-deep);

}

h2, .h2 {

  font-family: 'Playfair Display', serif;

  font-size: var(--font-size-2xl);

  font-weight: var(--font-weight-bold);

  line-height: var(--line-height-tight);

  color: var(--bb-deep);

}

h3, .h3 {

  font-family: 'Playfair Display', serif;

  font-size: var(--font-size-xl);

  font-weight: var(--font-weight-semibold);

  line-height: var(--line-height-normal);

  color: var(--bb-deep);

}

body, .body-text {

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-size: var(--bb-body-size);

  line-height: 1.6;

  color: var(--bb-deep);

}

/* Helper text */

.helper-text,

.muted {

  font-size: var(--font-size-xs);

  line-height: var(--line-height-relaxed);

  color: var(--bb-deep);

  opacity: 0.6;

  margin-top: 8px;

}

body {

  font-family: var(--font-ui);

  font-size: var(--font-size-md);

  line-height: var(--line-height-normal);

  color: var(--text-default);

  background-color: var(--bg-app);

  -webkit-font-smoothing: antialiased;

}



/* Prevent images from overflowing containers */

img, video {

  max-width: 100%;

  height: auto;

}



/* Remove default button/input shadows */

button, input, select, textarea {

  font-family: var(--font-sans);

  border-radius: var(--radius-input);

  border: none;

}



/* ---------------------------------------------------------------

   1. Typography System

   --------------------------------------------------------------- */

/* Note: h1, h2, h3 are now defined in Phase B unified typography section above */



h4, .h4 {

  font-size: var(--font-size-lg);

  font-weight: var(--font-weight-semibold);

  line-height: var(--line-height-normal);

  color: var(--bb-deep);

  margin: 0 0 var(--space-xs);

}



h5 {

  font-size: var(--font-size-md);

  font-weight: var(--weight-semibold);

  margin: 0 0 var(--space-xs);

}



h6 {

  font-size: var(--font-size-sm);

  font-weight: var(--weight-semibold);

  margin: 0 0 var(--space-xs);

}



p {

  margin: 0 0 var(--space-md) 0;

  font-size: var(--text-md);

  color: var(--text-default);

}



/* Muted labels */

.label {

  font-size: var(--text-sm);

  color: var(--text-muted);

}



/* Text utilities */

.text-xs { font-size: var(--font-size-xs); }

.text-sm { font-size: var(--font-size-sm); }

.text-lg { font-size: var(--font-size-lg); }

.text-xl { font-size: var(--font-size-xl); }

.text-2xl { font-size: var(--font-size-2xl); }

.text-3xl { font-size: var(--font-size-3xl); }

.text-display { font-size: var(--font-size-display); }



/* ---------------------------------------------------------------

   2. Buttons — Primary, Secondary, Tertiary

   --------------------------------------------------------------- */



button,

.bb-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: var(--space-xs) var(--space-md);

  border-radius: var(--radius-button);

  cursor: pointer;

  font-weight: var(--font-weight-medium);

  font-size: var(--font-size-sm);

  transition: background-color var(--transition-fast),

              color var(--transition-fast),

              border-color var(--transition-fast),

              box-shadow var(--transition-fast);

}



/* Primary */

.bb-button-primary {

  background: var(--accent);

  color: var(--text-inverse);

}



.bb-button-primary:hover {

  background: var(--accent-hover);

}



.bb-button-primary:active {

  background: var(--accent-active);

}



/* Secondary */

.bb-button-secondary {

  background: var(--bg-surface);

  border: 1px solid var(--accent);

  color: var(--accent);

}



.bb-button-secondary:hover {

  background: var(--accent-light);

}



.bb-button-secondary:active {

  background: var(--accent-muted);

}



/* Tertiary (text-only) */

.bb-button-tertiary {

  background: transparent;

  color: var(--accent);

  padding-left: 0;

  padding-right: 0;

}



.bb-button-tertiary:hover {

  color: var(--accent-hover);

}



/* Disabled */

button:disabled,

.bb-button:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



/* ---------------------------------------------------------------

   3. Inputs

   --------------------------------------------------------------- */



input[type="text"],

input[type="number"],

input[type="email"],

input[type="password"],

select,

textarea {

  width: 100%;

  padding: var(--space-sm) var(--space-md);

  border-radius: var(--radius-input);

  border: 1px solid var(--border-subtle);

  background: var(--bg-surface);

  font-size: var(--text-md);

  color: var(--text-default);

  transition: border-color var(--transition-fast),

              box-shadow var(--transition-fast);

}



input:focus,

textarea:focus,

select:focus {

  outline: none;

  border-color: var(--accent);

  box-shadow: 0 0 0 2px var(--accent-light);

}



/* Placeholder */

::placeholder {

  color: var(--text-muted);

}



/* ---------------------------------------------------------------

   4. Cards (Global)

   --------------------------------------------------------------- */



.bb-card,

.card,

.settings-card,

.favorites-card,

.iq-card,

.history-card {

  background: var(--bg-surface);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  padding: var(--space-lg);

  margin-bottom: var(--space-lg);

}



/* Remove legacy borders */

.bb-card,

.card {

  border: none !important;

}






/* ---------------------------------------------------------------

   5. Utility Classes

   --------------------------------------------------------------- */

.flex {

  display: flex;

}



.flex-col {

  display: flex;

  flex-direction: column;

}



.flex-center {

  display: flex;

  align-items: center;

  justify-content: center;

}



.grid {

  display: grid;

}



/* Gap utilities */

.gap-xs  { gap: var(--space-xs); }

.gap-sm  { gap: var(--space-sm); }

.gap-md  { gap: var(--space-md); }

.gap-lg  { gap: var(--space-lg); }



/* Margin utilities */

.mt-sm { margin-top: var(--space-sm); }

.mt-md { margin-top: var(--space-md); }

.mt-lg { margin-top: var(--space-lg); }



.mb-sm { margin-bottom: var(--space-sm); }

.mb-md { margin-bottom: var(--space-md); }

.mb-lg { margin-bottom: var(--space-lg); }



/* Alignment */

.text-center {

  text-align: center;

}



/* ---------------------------------------------------------------

   6. Scrollbar Polish

   --------------------------------------------------------------- */

::-webkit-scrollbar {

  width: 8px;

}



::-webkit-scrollbar-thumb {

  background: var(--border-medium);

  border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--text-muted);

}



/* ---------------------------------------------------------------

   7. Focus Ring Standardization

   --------------------------------------------------------------- */

*:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

}



/* ---------------------------------------------------------------

   8. Smooth Transitions

   --------------------------------------------------------------- */

a,

button,

input,

select,

textarea {

  transition: all var(--transition-fast);

}



/* ---------------------------------------------------------------

   Screen Reader Only Utility

   --------------------------------------------------------------- */

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  white-space: nowrap;

  border: 0;

}



/* ---------------------------------------------------------------

   END — UI SYSTEM

   --------------------------------------------------------------- */