/* =============================================================
   Blissfulbites — Colors & Type tokens
   Premium, regal palette inspired by the queen-and-cocoa logo:
   deep burgundy + champagne gold on warm ivory / cocoa.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Italianno&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Brand core ---------- */
  --bb-burgundy:        #5B1F2E;   /* primary — from logo */
  --bb-burgundy-deep:   #3F1320;   /* deep mode, headers */
  --bb-burgundy-soft:   #7A2D40;   /* hover / secondary surfaces */
  --bb-wine:            #8C2E47;   /* live accents */
  --bb-plum:            #4A1A2C;   /* outline strokes */

  --bb-gold:            #C9A45C;   /* champagne gold — secondary brand */
  --bb-gold-deep:       #A6843F;   /* engraved / pressed */
  --bb-gold-light:      #E1C892;   /* hover, foil shimmer */
  --bb-gold-leaf:       #B8893A;   /* darker decorative */

  --bb-cocoa:           #3A2418;   /* dark chocolate, ink */
  --bb-cocoa-mid:       #5C3A24;   /* milk chocolate */
  --bb-cocoa-light:     #8E6244;   /* roasted */
  --bb-cocoa-cream:     #C9A37B;   /* praline */

  --bb-ivory:           #FAF6EC;   /* primary background */
  --bb-cream:           #F2E9D6;   /* card / panel surface */
  --bb-parchment:       #ECE0C4;   /* warm tinted surface */
  --bb-pearl:           #FFFCF5;   /* elevated white */

  /* ---------- Semantic ---------- */
  --fg-1: var(--bb-cocoa);                /* primary text */
  --fg-2: #5C4030;                         /* secondary text */
  --fg-3: #8A7461;                         /* muted / metadata */
  --fg-on-dark: var(--bb-ivory);
  --fg-on-gold: var(--bb-burgundy-deep);

  --bg-1: var(--bb-ivory);                 /* page */
  --bg-2: var(--bb-cream);                 /* card */
  --bg-3: var(--bb-parchment);             /* nested */
  --bg-dark: var(--bb-burgundy-deep);      /* hero / footer */
  --bg-cocoa: var(--bb-cocoa);             /* alt dark */

  --accent: var(--bb-gold);
  --accent-pressed: var(--bb-gold-deep);
  --primary: var(--bb-burgundy);
  --primary-pressed: var(--bb-burgundy-deep);

  --line:        rgba(58, 36, 24, 0.14);
  --line-strong: rgba(58, 36, 24, 0.28);
  --line-gold:   rgba(201, 164, 92, 0.55);

  --success: #4F6B3A;
  --warning: #B8893A;
  --danger:  #8C2E2E;

  /* ---------- Type families ---------- */
  --font-script:  'Italianno', 'Allura', cursive;            /* "Blissful Bites" accent */
  --font-display: 'Cinzel', 'Trajan Pro', serif;             /* ALL-CAPS regal wordmark */
  --font-serif:   'Cormorant Garamond', 'Garamond', serif;   /* headlines + display body */
  --font-body:    'Cormorant Garamond', 'Garamond', serif;   /* paragraph (elegant) */
  --font-ui:      'Inter', -apple-system, system-ui, sans-serif; /* UI chrome / micro */

  /* ---------- Type scale ---------- */
  --t-script-xl:  clamp(64px, 9vw, 132px);
  --t-script-lg:  clamp(48px, 6vw, 88px);

  --t-display-xl: clamp(40px, 5.5vw, 76px);  /* Cinzel hero */
  --t-display-lg: clamp(30px, 3.6vw, 52px);
  --t-display-md: 28px;
  --t-display-sm: 20px;

  --t-h1: clamp(40px, 5vw, 64px);
  --t-h2: clamp(30px, 3.5vw, 44px);
  --t-h3: 28px;
  --t-h4: 22px;
  --t-h5: 18px;

  --t-body-lg: 19px;
  --t-body:    17px;
  --t-body-sm: 15px;
  --t-meta:    13px;
  --t-micro:   11px;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(58,36,24,0.08), 0 1px 1px rgba(58,36,24,0.04);
  --shadow-2: 0 6px 18px rgba(58,36,24,0.10), 0 2px 4px rgba(58,36,24,0.06);
  --shadow-3: 0 18px 40px rgba(58,36,24,0.16), 0 6px 12px rgba(58,36,24,0.08);
  --shadow-foil: 0 1px 0 rgba(255,250,235,0.6) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 8px 22px rgba(91,31,46,0.18);
  --shadow-press: 0 1px 1px rgba(58,36,24,0.18) inset;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 480ms;
  --dur-cinema: 900ms;
}

/* =============================================================
   Semantic element styles
   ============================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "liga", "kern", "onum";
  -webkit-font-smoothing: antialiased;
}

.bb-script   { font-family: var(--font-script); font-weight: 400; line-height: 0.9; letter-spacing: 0.005em; color: var(--bb-gold); }
.bb-display  { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.bb-eyebrow  { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; font-size: 12px; color: var(--bb-gold-deep); }
.bb-serif    { font-family: var(--font-serif); }
.bb-ui       { font-family: var(--font-ui); }

h1, .h1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.005em; color: var(--bb-burgundy-deep); }
h2, .h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-h2); line-height: 1.1;  color: var(--bb-burgundy-deep); }
h3, .h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-h3); line-height: 1.2;  color: var(--bb-burgundy-deep); }
h4, .h4 { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h4); line-height: 1.3;  color: var(--bb-cocoa); }
h5, .h5 { font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bb-gold-deep); }

p, .p { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.65; color: var(--fg-1); text-wrap: pretty; }
.lede { font-size: var(--t-body-lg); line-height: 1.55; color: var(--fg-2); font-style: italic; }
.meta { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: 0.04em; color: var(--fg-3); }

.rule-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bb-gold) 20%, var(--bb-gold) 80%, transparent);
  border: 0;
  width: 80px;
  margin: var(--s-5) auto;
}

.rule-gold-fancy {
  display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--bb-gold-deep);
}
.rule-gold-fancy::before, .rule-gold-fancy::after {
  content: ""; height: 1px; flex: 1; max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--bb-gold));
}
.rule-gold-fancy::after { background: linear-gradient(90deg, var(--bb-gold), transparent); }

/* =============================================================
   Foil gradient — used sparingly on accents only
   ============================================================= */
.bb-foil-text {
  background: linear-gradient(180deg, #E8CC8E 0%, #C9A45C 45%, #A6843F 60%, #E1C892 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}