/* =============================================================
   The Bold Biz — Colors & Type tokens
   ============================================================= */

/* Fonts — Poppins is the brand face (files provided by the user in /fonts).
   Used for both display (thin + bold, uppercased) AND body copy, matching
   the logo. Sacramento (Google Fonts) is still a SUBSTITUTE for the "Biz"
   script flourish — please share the original script file if you have it. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

:root {
  /* -------- Brand colors (updated April 2026) -------- */
  --brand-cream:       #faf6f1; /* Cream — page background */
  --brand-blush:       #f2d9d0; /* Soft Blush — soft surface / cards */
  --brand-rose:        #f29493; /* Dusty Rose — primary accent / CTAs */
  --brand-taupe:       #8c7b75; /* Warm Taupe — muted text / meta */
  --brand-mocha:       #3d2b2b; /* Deep Mocha — headings / strong text */

  /* Legacy aliases (kept for backward compat with older HTML artifacts) */
  --brand-pink:        #f29493;
  --brand-orange:      #f2d9d0;
  --brand-ink:         #8c7b75;
  --brand-beige:       #f2d9d0;
  --brand-bg-beige:    #faf6f1;
  --brand-bg-pink:     #f2d9d0;

  /* -------- Extended neutrals (warm, mocha-based) -------- */
  --ink-900: #3d2b2b;   /* Deep Mocha — headings */
  --ink-700: #5c4040;   /* rich body text */
  --ink-500: #8c7b75;   /* Warm Taupe — muted */
  --ink-300: #c4b0aa;   /* soft dividers */
  --ink-200: #ddd0cb;
  --ink-100: #f2d9d0;   /* Soft Blush */
  --ink-50:  #faf6f1;   /* Cream */
  --white:   #ffffff;

  /* -------- Rose tints -------- */
  --pink-600:  #d97070;  /* pressed / hover */
  --pink-500:  #f29493;  /* Dusty Rose */
  --pink-200:  #f7c4c3;
  --pink-100:  #fbe4e4;
  --pink-50:   #fdf3f3;

  /* -------- Blush tints -------- */
  --orange-600: #c9a898;
  --orange-500: #f2d9d0;  /* Soft Blush */
  --orange-200: #f7e8e3;
  --orange-100: #fbf2ef;
  --orange-50:  #fdf8f6;

  /* -------- Semantic tokens -------- */
  --fg-1: var(--ink-900);             /* headings, strong text → Deep Mocha */
  --fg-2: var(--ink-700);             /* body */
  --fg-3: var(--ink-500);             /* muted, meta → Warm Taupe */
  --fg-4: var(--ink-300);             /* disabled, placeholder */
  --fg-on-accent: #ffffff;

  --bg-1: var(--brand-cream);         /* page default */
  --bg-2: #ffffff;                    /* card */
  --bg-3: var(--brand-blush);         /* subtle surface → Soft Blush */
  --bg-pink-soft: #fbe4e4;            /* very light rose */
  --bg-orange-soft: var(--orange-100);

  --border-subtle: #ead9d3;
  --border-default: #ddd0cb;
  --border-strong: #8c7b75;

  --accent-primary: var(--brand-rose);
  --accent-primary-hover: var(--pink-600);
  --accent-secondary: var(--brand-blush);
  --accent-secondary-hover: var(--orange-600);

  --link: var(--brand-rose);
  --link-hover: var(--pink-600);

  /* -------- Radii -------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* -------- Shadows (soft, warm) -------- */
  --shadow-xs: 0 1px 2px rgba(84, 84, 84, 0.06);
  --shadow-sm: 0 2px 8px rgba(84, 84, 84, 0.06);
  --shadow-md: 0 6px 20px rgba(84, 84, 84, 0.08);
  --shadow-lg: 0 18px 40px rgba(84, 84, 84, 0.12);
  --shadow-focus: 0 0 0 3px rgba(244, 65, 116, 0.25);

  /* -------- Spacing scale (4px base) -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* -------- Type families -------- */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-script:  'Sacramento', 'Dancing Script', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* -------- Type scale -------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   Base element styles — semantic defaults
   ============================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  font-weight: 300;         /* display thin, like the logo */
}
h1 { font-family: var(--font-serif); font-size: var(--text-4xl); letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.1; }
h1 b, h1 strong { font-weight: 700; font-style: italic; color: var(--brand-rose); }
h2 { font-size: var(--text-3xl); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 300; }
h3 { font-size: var(--text-2xl); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
h4 { font-size: var(--text-xl); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
h5 { font-size: var(--text-md); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--fg-3); }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  font-size: 1.25em;
  color: var(--ink-900);
}

p { margin: 0 0 var(--space-4); color: var(--fg-2); font-size: var(--text-base); }
small, .text-sm { font-size: var(--text-sm); color: var(--fg-3); }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-3);
}

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--bg-3); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--fg-1); }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

::selection { background: var(--pink-200); color: var(--ink-900); }