/* ===========================
   ShowConnect Brand Token System
   My Card Post — ShowConnect
   =========================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=DM+Serif+Display&family=DM+Mono:wght@400&display=swap');

/* ===========================
   Brand Tokens (Section 2.1)
   =========================== */
:root {
  /* Primary */
  --mcp-yellow: #F5C518;
  --mcp-yellow-dark: #D4A900;
  --mcp-yellow-light: #FEFCE8;
  --mcp-yellow-border: #FDE68A;

  /* Neutrals */
  --mcp-black: #1A1A1A;
  --mcp-gray: #6B7280;
  --mcp-gray-light: #F3F4F6;
  --mcp-border: #E5E7EB;
  --mcp-white: #FFFFFF;

  /* Typography Scale */
  --font-primary: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', serif;
  --font-mono: 'DM Mono', monospace;

  /* Spacing */
  --header-height-desktop: 60px;
  --header-height-mobile: 60px;
}

/* ===========================
   Base Typography
   =========================== */
body {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--mcp-black);
  background-color: var(--mcp-gray-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 500;
  /* color intentionally omitted — headings inherit from parent context
     (white via Tailwind text-white on dark sections, --mcp-black from body on light pages) */
}

/* Hero headlines only */
.display-heading {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Referral URLs, code, shop URLs */
.mono, code, .referral-url, .shop-url {
  font-family: var(--font-mono);
  font-weight: 400;
}

/* ===========================
   Button Styles
   =========================== */
.btn-primary {
  background-color: var(--mcp-yellow);
  color: var(--mcp-black);
  font-family: var(--font-primary);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background-color: var(--mcp-yellow-dark);
}

/* ===========================
   Card / Surface Styles
   =========================== */
.card {
  background-color: var(--mcp-white);
  border: 1px solid var(--mcp-border);
  border-radius: 12px;
}

.callout {
  background-color: var(--mcp-yellow-light);
  border: 1px solid var(--mcp-yellow-border);
  border-radius: 8px;
}

/* ===========================
   Utility Classes
   =========================== */
.text-muted {
  color: var(--mcp-gray);
}

.text-brand {
  color: var(--mcp-yellow);
}

.bg-brand {
  background-color: var(--mcp-yellow);
}

.border-brand {
  border-color: var(--mcp-yellow-border);
}

/* ===========================
   Responsive Header
   =========================== */

/* Base (mobile-first) */
.site-header {
  height: 60px;
}

.header-inner {
  padding: 0 12px;
}

.header-logo {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.header-wordmark {
  font-size: 16px;
}

.header-cta {
  font-size: 13px;
  height: 34px;
  padding: 0 12px;
}

.header-brand {
  overflow: hidden;
}

/* Small (≥480px) */
@media (min-width: 480px) {
  .site-header {
    height: 70px;
  }

  .header-logo {
    height: 64px;
  }

  .header-wordmark {
    font-size: 18px;
  }

  .header-cta {
    font-size: 14px;
    height: 36px;
    padding: 0 14px;
  }

  .header-inner {
    padding: 0 16px;
  }
}

/* Medium (≥640px) */
@media (min-width: 640px) {
  .site-header {
    height: 80px;
  }

  .header-logo {
    height: 80px;
  }

  .header-wordmark {
    font-size: 20px;
  }

  .header-cta {
    font-size: 14px;
    height: 38px;
    padding: 0 16px;
  }

  .header-inner {
    padding: 0 24px;
  }
}

/* Large (≥1024px) */
@media (min-width: 1024px) {
  .header-logo {
    height: 100px;
  }
}