/* ===========================
   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: 56px;
  --header-height-mobile: 52px;
}

/* ===========================
   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: var(--mcp-black);
}

/* 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);
}