/* ==========================================================================
   Mankai CRM Marketing, Design Tokens
   Source of truth: website-rebuild/07-theme-design-spec.md
   ========================================================================== */

/* ---- Fonts (self-hosted, variable) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: paper & ink (warm-biased neutrals) ---- */
  --paper:        #FAF7F2;
  --paper-raised: #FFFFFF;
  --paper-sunken: #F1EBE2;
  --ink:          #211D18;
  --ink-soft:     #575047;
  --ink-faint:    #8B8278;
  --line:         #E5DDD1;

  /* ---- Color: accents ---- */
  --accent:       #C0392B;
  --accent-deep:  #9C2B1F;
  --accent-tint:  #F8E9E6;
  --gold:         #D9912F;
  --gold-deep:    #A86C1E;
  --gold-tint:    #F7EBD7;
  --leaf:         #4F7A5B;
  --leaf-tint:    #E8F0E9;

  /* ---- Color: night bands ---- */
  --night:        #191511;
  --night-raised: #221D17;
  --night-ink:    #F4EFE7;
  --night-soft:   #B5AB9D;
  --night-line:   #332C24;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  --text-hero:    clamp(2.7rem, 6.4vw, 4.75rem);
  --text-h2:      clamp(2.1rem, 4.2vw, 3.1rem);
  --text-h3:      clamp(1.45rem, 2.3vw, 1.85rem);
  --text-h4:      1.1875rem;
  --text-lede:    clamp(1.1875rem, 1.7vw, 1.4375rem);
  --text-body:    1.125rem;
  --text-small:   1rem;
  --text-caption: 0.875rem;
  --text-eyebrow: 0.75rem;

  /* ---- Spacing (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;
  --space-10: 128px;
  --space-11: 160px;

  --section-pad: clamp(96px, 12vw, 176px);
  --hero-pad: clamp(96px, 14vw, 200px);
  --block-gap: clamp(72px, 9vw, 128px);

  /* ---- Layout ---- */
  --container:       min(1160px, 92vw);
  --container-wide:  min(1360px, 94vw);
  --container-prose: min(680px, 92vw);
  --prose-max: 42rem;

  /* ---- Radii ---- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* ---- Elevation (warm-tinted, whisper-quiet) ---- */
  --shadow-s: 0 1px 2px rgb(33 29 24 / 0.05);
  --shadow-m: 0 2px 8px -2px rgb(33 29 24 / 0.08), 0 8px 24px -8px rgb(33 29 24 / 0.10);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --speed: 200ms;
}

@media (max-width: 820px) {
  :root {
    --section-pad: var(--space-9);
    --hero-pad: var(--space-9);
    --block-gap: var(--space-8);
  }
}