/* ============================================================
   MicroFaith Design System — colors, type, spacing
   ============================================================ */

/* ---- Fonts: Fraunces shipped locally (TTFs in /fonts). Inter Tight from Google. ---- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/Fraunces_72pt-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100; font-display: swap;
  src: url('fonts/Fraunces_72pt_SuperSoft-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Fraunces_72pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/Fraunces_72pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Fraunces_72pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/Fraunces_72pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Fraunces_72pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 900; font-display: swap;
  src: url('fonts/Fraunces_72pt-BlackItalic.ttf') format('truetype'); }

/* Soft variant */
@font-face { font-family: 'Fraunces Soft'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Fraunces_72pt_Soft-Light.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces Soft'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/Fraunces_72pt_Soft-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces Soft'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Fraunces_72pt_Soft-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces Soft'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Fraunces_72pt_Soft-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces Soft'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Fraunces_72pt_Soft-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces Soft'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/Fraunces_72pt_Soft-BoldItalic.ttf') format('truetype'); }

/* SuperSoft variant — for the largest display moments */
@font-face { font-family: 'Fraunces SuperSoft'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Fraunces_72pt_SuperSoft-Light.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces SuperSoft'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/Fraunces_72pt_SuperSoft-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces SuperSoft'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Fraunces_72pt_SuperSoft-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces SuperSoft'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Fraunces_72pt_SuperSoft-Italic.ttf') format('truetype'); }

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700;900&display=swap');

:root {
  /* ============ COLOR TOKENS ============ */
  --mf-paper:        #F2ECE0;
  --mf-paper-warm:   #E6E2D5;
  --mf-white:        #FFFFFF;
  --mf-ink:          #1A1512;
  --mf-ink-soft:     #3E3A32;
  --mf-ink-2:        #020302;
  --mf-stone:        #8B8271;
  --mf-stone-soft:   #C5BFB1;
  --mf-soil:         #3B2C1F;
  --mf-sage:         #5A6B52;
  --mf-sage-deep:    #44473A;
  --mf-amber:        #C38A3A;
  --mf-amber-soft:   #EAC84D;
  --mf-clay:         #732313;
  --mf-border:        rgba(26, 21, 18, 0.14);
  --mf-border-strong: rgba(26, 21, 18, 0.30);
  --mf-rule:          rgba(26, 21, 18, 0.12);
  --mf-overlay-3:     rgba(0, 0, 0, 0.03);
  --mf-overlay-5:     rgba(0, 0, 0, 0.05);
  --mf-overlay-7:     rgba(0, 0, 0, 0.07);
  --mf-overlay-20:    rgba(26, 21, 18, 0.20);
  --mf-scrim:         rgba(0, 0, 0, 0.40);

  --mf-fg-1:        var(--mf-ink);
  --mf-fg-2:        var(--mf-ink-soft);
  --mf-fg-3:        var(--mf-stone);
  --mf-fg-on-dark:  var(--mf-paper);
  --mf-bg-1:        var(--mf-paper);
  --mf-bg-2:        var(--mf-paper-warm);
  --mf-link:        var(--mf-sage);
  --mf-link-hover:  var(--mf-amber);
  --mf-ground:      radial-gradient(rgba(59,44,31,0.10) 0%, rgba(59,44,31,0) 100%);

  /* ============ TYPE ============ */
  --mf-serif:           'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mf-serif-soft:      'Fraunces Soft', 'Fraunces', Georgia, serif;
  --mf-serif-supersoft: 'Fraunces SuperSoft', 'Fraunces Soft', 'Fraunces', Georgia, serif;
  --mf-sans:     'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mf-sans-app: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --mf-fs-hero:    148px;
  --mf-fs-d1:       64px;
  --mf-fs-d2:       44px;
  --mf-fs-d3:       38px;
  --mf-fs-d4:       36px;
  --mf-fs-h1:       24px;
  --mf-fs-h2:       22px;
  --mf-fs-h3:       19px;
  --mf-fs-body:     17px;
  --mf-fs-body-app: 18px;
  --mf-fs-meta:     14px;
  --mf-fs-eyebrow:  10.5px;
  --mf-fs-micro:    10px;

  --mf-tracked:     0.22em;
  --mf-tracked-2:   0.32em;
  --mf-tight:       -0.03em;
  --mf-tight-2:     -0.05em;

  --mf-lh-display: 1.0;
  --mf-lh-tight:   1.1;
  --mf-lh-snug:    1.3;
  --mf-lh-body:    1.65;

  /* ============ RADII ============ */
  --mf-r-pill:    31px;
  --mf-r-card:    20px;
  --mf-r-card-2:  18px;
  --mf-r-pill-sm: 16px;
  --mf-r-tap:     14px;
  --mf-r-app-icon: 13px;
  --mf-r-callout: 8px;

  /* ============ SPACING ============ */
  --mf-s-1: 4px;
  --mf-s-2: 8px;
  --mf-s-3: 10px;
  --mf-s-4: 16px;
  --mf-s-5: 20px;
  --mf-s-6: 28px;
  --mf-s-7: 40px;
  --mf-s-8: 56px;
  --mf-s-9: 80px;

  /* ============ ELEVATION ============ */
  --mf-shadow-card:  0 1px 0 rgba(0,0,0,0.04);
  --mf-shadow-float: 0 12px 40px rgba(26,21,18,0.10);

  /* ============ MOTION ============ */
  --mf-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --mf-dur-fast:    120ms;
  --mf-dur-base:    200ms;
  --mf-dur-slow:    320ms;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--mf-paper);
  color: var(--mf-ink);
  font-family: var(--mf-serif);
  font-weight: 300;
  line-height: var(--mf-lh-body);
}