/* =========================================================================
   Vibha in Progress — Colors & Type
   Warm editorial: premium magazine × founder toolkit.
   Import this file, then use the CSS variables & semantic classes below.
   ========================================================================= */

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Surfaces ---------- */
  --bg-cream:       #F5F0E8;   /* page background — NEVER use pure white for pages */
  --bg-card:        #FFFFFF;   /* card surface */
  --bg-dark:        #2D2320;   /* dark panels (cover slides, feature panels) */

  /* ---------- Text ---------- */
  --fg-1:           #2D2320;   /* primary text, also dark panel bg */
  --fg-2:           #7A6B62;   /* secondary text, labels, captions */
  --fg-on-dark:     #F5F0E8;   /* text on dark panels */
  --fg-on-dark-hi:  #F2B8C6;   /* pink highlight on dark panels */

  /* ---------- Brand accents ---------- */
  --berry:          #A8174A;   /* primary accent — ONE element per slide */
  --pink:           #F2B8C6;   /* soft highlight, dark-panel text accents */
  --gingham:        #E8A0A0;   /* tag borders */

  /* ---------- Semantic ---------- */
  --sage:           #6B8856;   /* positive / success */
  --dark-sage:      #3D5230;   /* deeper green */
  --burgundy:       #7A1B1B;   /* warning / caution */

  /* ---------- Structure ---------- */
  --border-warm:    #E8DFD3;   /* card borders, dividers */

  /* ---------- Type families ---------- */
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-script:    'Caveat', 'Playfair Display', cursive;

  /* ---------- Type scale ---------- */
  --fs-display:     64px;      /* hero headline */
  --fs-h1:          48px;      /* slide / page title */
  --fs-h2:          32px;      /* section */
  --fs-h3:          24px;      /* card title */
  --fs-h4:          18px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-label:       12px;
  --fs-tag:         11px;

  /* ---------- Line heights ---------- */
  --lh-display:     1.05;
  --lh-heading:     1.15;
  --lh-body:        1.55;
  --lh-tight:       1.3;

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

  /* ---------- Radii ---------- */
  --r-tag:          5px;       /* tags */
  --r-sm:           8px;       /* inputs, small chips */
  --r-md:           14px;      /* cards (canonical) */
  --r-lg:           20px;      /* larger panels */
  --r-pill:         999px;

  /* ---------- Shadows ---------- */
  --shadow-card:    0 1px 2px rgba(45, 35, 32, 0.04), 0 4px 12px rgba(45, 35, 32, 0.06);
  --shadow-lifted:  0 2px 4px rgba(45, 35, 32, 0.05), 0 12px 28px rgba(45, 35, 32, 0.10);
  --shadow-inset:   inset 0 0 0 1px var(--border-warm);

  /* ---------- Motion ---------- */
  --ease-standard:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       360ms;

  /* ---------- The berry divider (signature) ---------- */
  --divider-berry:  48px;
  --divider-height: 3px;
}

/* =========================================================================
   Semantic base — apply on top of a page with bg-cream background.
   ========================================================================= */

.vp-page {
  background: var(--bg-cream);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vp-page--dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

/* ---------- Display & headings ---------- */

.vp-display,
.vp-h1,
.vp-h2,
.vp-h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

.vp-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}

.vp-h1 { font-size: var(--fs-h1); font-weight: 700; }
.vp-h2 { font-size: var(--fs-h2); font-weight: 700; }
.vp-h3 { font-size: var(--fs-h3); font-weight: 600; }

/* Signature divider: 48×3 berry bar under every headline */
.vp-headline-group > .vp-display + .vp-divider,
.vp-headline-group > .vp-h1 + .vp-divider,
.vp-headline-group > .vp-h2 + .vp-divider,
.vp-headline-group > .vp-h3 + .vp-divider {
  margin-top: 16px;
}

.vp-divider {
  display: block;
  width: var(--divider-berry);
  height: var(--divider-height);
  background: var(--berry);
  border: 0;
}

/* ---------- Body & labels ---------- */

.vp-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--fg-1);
}

.vp-body--muted { color: var(--fg-2); }

.vp-lead {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg-1);
}

.vp-small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}

.vp-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.vp-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--berry);
}

/* Highlight used inside dark panels or body copy */
.vp-highlight {
  color: var(--berry);
  font-weight: 600;
}

.vp-page--dark .vp-highlight { color: var(--pink); }

/* ---------- Tags ---------- */

.vp-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid var(--gingham);
  border-radius: var(--r-tag);
}

.vp-tag--sage    { color: var(--dark-sage); border-color: var(--sage); }
.vp-tag--berry   { color: var(--berry);     border-color: var(--berry); }
.vp-tag--muted   { color: var(--fg-2);      border-color: var(--border-warm); }

/* ---------- Cards ---------- */

.vp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

/* ---------- Buttons ---------- */

.vp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.vp-btn:active { transform: translateY(1px); }

.vp-btn--primary {
  background: var(--berry);
  color: #FFFFFF;
}
.vp-btn--primary:hover { background: #8E0F3E; }

.vp-btn--secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--fg-1);
}
.vp-btn--secondary:hover { background: var(--fg-1); color: var(--bg-cream); }

.vp-btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-warm);
}
.vp-btn--ghost:hover { background: var(--border-warm); }

/* ---------- Utility ---------- */

.vp-divider-line {
  height: 1px;
  background: var(--border-warm);
  border: 0;
  margin: 0;
}