/* =============================================
   Entremigas subdomain re-skin — warm cream + mauve + pink + Fraunces.
   Loaded after style.css on /entremigas pages. Variables override the
   shared dark theme; hardcoded #fff selectors are re-pointed manually.
   Source palette: carla_bakery/app/src/app/globals.css (the actual app).
   ============================================= */

:root {
  --bg:            #FCF9F8;        /* warm cream */
  --surface:       #FFFFFF;
  --surface-2:     #FDF1F3;        /* pink-pale */
  --border:        #F5E5E8;        /* pink-tinted */
  --border-hover:  #E8A6B2;        /* pink */
  --accent:        #E8A6B2;        /* pink */
  --accent-dim:    rgba(232, 166, 178, 0.16);
  --accent-border: rgba(232, 166, 178, 0.45);
  --brand:         #5E4A4D;        /* mauve-brown, used inline below */
  --terracotta:    #C7866C;        /* warm accent for highlights */
  --text:          #3A2E2F;        /* dark mauve-brown */
  --text-2:        #8B7A7C;        /* mauve-soft */
  --text-3:        rgba(58, 46, 47, 0.50);
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Body uses the shared --bg variable so this just works. But we
   re-state for clarity and to drop the dark scrollbar tint. */
body {
  background: var(--bg);
  color: var(--text);
}

/* Nav: dark translucent in the shared theme. Switch to cream
   translucent so text sits on a warm surface. */
.nav {
  background: rgba(252, 249, 248, 0.85);
  border-bottom: 1px solid var(--border);
}
.nav-logo,
.nav-links a { color: var(--text-2); }
.nav-logo:hover,
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-logo span { color: var(--accent); }

/* Headings switch to Fraunces. Source style.css sets these to #fff
   for the dark theme, so we both retint and reface. */
.detail-hero h1,
.detail-h2,
.feature-card-title,
.detail-footer-cta h3,
.page-hero h1 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.015em;
  font-weight: 500;
}

/* Hero h1 wants more weight and a touch of mauve depth. Also the
   shared rule sets letter-spacing -0.04em which is too tight on a
   serif; loosen it. */
.detail-hero h1 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Detail h2 cap to match prose width. Same fix as Ledge. */
.detail-h2 {
  max-width: 640px;
}

/* Tagline + body prose tints come from --text-2, which is now mauve-
   soft. The shared rules already use the variable, so this just works.
   Restate the prose color in case a future shared override sets it. */
.detail-tagline { color: var(--text-2); }
.detail-prose,
.about-text,
.work-paragraph { color: var(--text-2); }

/* Section label: lime in dark theme. Re-tint to terracotta for warmth. */
.section-label,
.detail-section .section-label { color: var(--terracotta); }

/* Status badge: pink dim background with pink border + pink dot. */
.status-badge {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--text-2);
}
.status-badge .dot { background: var(--accent); }

/* Buttons. Primary was lime + dark text. Switch to pink gradient
   with dark mauve text, matching the actual app's btn-primary. */
.btn-primary {
  background: linear-gradient(180deg, #ECB0BB 0%, #E8A6B2 100%);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
              0 4px 14px -4px rgba(232, 166, 178, 0.5);
}
.btn-primary:hover {
  filter: brightness(0.97);
  background: linear-gradient(180deg, #ECB0BB 0%, #E8A6B2 100%);
  transform: translateY(-1px);
}

.btn-outline {
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--accent);
}

/* Skip link sits on the accent (was lime, now pink). Mauve text reads. */
.skip-link { color: var(--text); background: var(--accent); }

/* Detail prose links: lime underline -> pink underline. */
.about-text a,
.detail-prose a {
  color: var(--terracotta);
  border-bottom-color: rgba(199, 134, 108, 0.35);
}
.about-text a:hover,
.detail-prose a:hover { border-bottom-color: var(--terracotta); }

/* Feature cards: white surface with subtle warm gradient + pink-tinted
   border, mirroring the app's card token. */
.feature-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFAFB 100%);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(94, 74, 77, 0.04),
              0 6px 16px -8px rgba(94, 74, 77, 0.08);
}
.feature-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-2) 100%);
  box-shadow: 0 2px 0 rgba(94, 74, 77, 0.05),
              0 12px 28px -10px rgba(232, 166, 178, 0.30);
}
.feature-card-desc { color: var(--text-2); }

/* Tags: white surface, pink-tinted border. Drop the font swap
   since Inter reads cleanly on this palette and Fraunces is for
   display only. */
.tag {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.tag:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Screen captions: muted mauve, slightly larger so they're legible
   on cream. */
.shot-caption {
  color: var(--text-2);
  font-size: 0.85rem;
}

/* Shot images: the screenshots are warm/pink and blend with the page
   bg by design. Add a darker mauve hairline + deeper shadow so each
   screen reads as a distinct phone surface against the cream. */
.shot img {
  border: 1px solid rgba(58, 46, 47, 0.14);
  box-shadow: 0 1px 0 rgba(58, 46, 47, 0.04),
              0 12px 32px -8px rgba(94, 74, 77, 0.28),
              0 4px 8px -2px rgba(94, 74, 77, 0.12);
}
.shot img:hover {
  border-color: rgba(58, 46, 47, 0.22);
  box-shadow: 0 1px 0 rgba(58, 46, 47, 0.05),
              0 18px 44px -10px rgba(94, 74, 77, 0.34),
              0 6px 10px -2px rgba(94, 74, 77, 0.14);
}

/* Footer: mauve-soft text with pink hover. */
.footer { border-top: 1px solid var(--border); }
.footer p { color: var(--text-2); }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--accent); }