/* =============================================================
   Falten mit Yvonne — Colors & Type
   =============================================================
   Source of truth for brand color tokens and the base type
   scale. Import this file (or copy the :root block) into any
   page that should look like Falten mit Yvonne.

   The palette is sampled directly from the channel art:
   sunny scrapbook yellow on the left, mint-paper green in the
   middle, lagoon teal on the right, with old-gold damask
   accents and the white origami swan sitting on top.

   Fonts are loaded via Google Fonts at the top — substitutions
   for the brand's hand-lettered logo and a friendly body face.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

@font-face {
  font-family: 'Hollie Script Pro';
  src: url('../fonts/Hollie_Script_Pro.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colors (paper / scrapbook palette) ---------- */
  --fmy-sun-50:        #FFFDF0;
  --fmy-sun-100:       #FBF3B8;
  --fmy-sun-200:       #F8EC97;
  --fmy-sun-300:       #F5E57E;   /* soft yellow band */
  --fmy-sun-400:       #F0D945;   /* primary sunshine */
  --fmy-sun-500:       #E8C42C;   /* deep sunflower */
  --fmy-sun-600:       #C09A1F;

  --fmy-mint-50:       #F4FAEF;
  --fmy-mint-100:      #E6F2DC;
  --fmy-mint-200:      #CEE9C0;   /* paper mint background */
  --fmy-mint-300:      #B5DBA4;
  --fmy-mint-400:      #8FC57A;

  --fmy-teal-200:      #A8D2D1;
  --fmy-teal-300:      #7AB9B8;   /* lagoon */
  --fmy-teal-400:      #55A4A7;   /* deeper lagoon — secondary */
  --fmy-teal-500:      #3F8689;
  --fmy-teal-600:      #2E6669;

  --fmy-gold-300:      #B8B68A;
  --fmy-gold-400:      #8B916C;   /* damask gold-olive */
  --fmy-gold-500:      #6F744F;

  --fmy-rose-400:      #8E2A3C;   /* host portrait sweater — used sparingly */

  /* ---------- Neutrals (paper, ink, shadow) ---------- */
  --fmy-paper:         #FAF8F1;   /* page background — warm paper */
  --fmy-paper-soft:    #F2EFE4;
  --fmy-paper-edge:    #E6E1D0;   /* hairline borders */
  --fmy-ink:           #1A1A1A;   /* swan outline / body text */
  --fmy-ink-soft:      #3A3A38;
  --fmy-ink-muted:     #6B6B66;
  --fmy-ink-faint:     #9A9A93;
  --fmy-white:         #FFFFFF;
  --fmy-shadow:        rgba(26, 26, 26, 0.18);
  --fmy-shadow-soft:   rgba(26, 26, 26, 0.08);

  /* ---------- Semantic color tokens ---------- */
  --bg:                var(--fmy-paper);
  --bg-elevated:       var(--fmy-white);
  --bg-mint:           var(--fmy-mint-200);
  --bg-sun:            var(--fmy-sun-300);
  --bg-teal:           var(--fmy-teal-400);

  --fg:                var(--fmy-ink);
  --fg-soft:           var(--fmy-ink-soft);
  --fg-muted:          var(--fmy-ink-muted);
  --fg-faint:          var(--fmy-ink-faint);
  --fg-inverse:        var(--fmy-white);

  --border:            var(--fmy-paper-edge);
  --border-strong:     var(--fmy-ink);

  --accent:            var(--fmy-sun-400);   /* the warm CTA */
  --accent-fg:         var(--fmy-ink);
  --secondary:         var(--fmy-teal-400);  /* link / secondary CTA */
  --secondary-fg:      var(--fmy-white);

  /* ---------- Typography families ---------- */
  --font-script:       'Hollie Script Pro', 'Sign Painter', 'Brush Script MT', cursive;
  --font-sans:         'Nunito', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:         'SF Mono', ui-monospace, 'Roboto Mono', Menlo, monospace;

  /* ---------- Type scale (modular, friendly) ---------- */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.375rem;  /* 22 */
  --fs-xl:    1.75rem;   /* 28 */
  --fs-2xl:   2.25rem;   /* 36 */
  --fs-3xl:   3rem;      /* 48 */
  --fs-4xl:   4rem;      /* 64 — display script */
  --fs-5xl:   5.5rem;    /* 88 — hero script */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- Shadows (soft paper drop) ---------- */
  --shadow-1: 0 1px 2px var(--fmy-shadow-soft);
  --shadow-2: 0 4px 10px var(--fmy-shadow-soft), 0 1px 2px var(--fmy-shadow-soft);
  --shadow-3: 0 10px 24px var(--fmy-shadow), 0 2px 4px var(--fmy-shadow-soft);
  --shadow-paper: 4px 6px 0 rgba(26,26,26,0.10);   /* offset paper shadow — origami */

  /* ---------- Spacing (8pt-ish) ---------- */
  --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;
}

/* ============================================================
   Semantic typography utilities — drop on any page
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fmy-hero,
.fmy-display {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}

.fmy-h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.fmy-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}
.fmy-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.fmy-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.fmy-body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}
.fmy-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}
.fmy-small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.fmy-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 700;
  color: var(--fmy-teal-500);
}
.fmy-script {
  font-family: var(--font-script);
  font-weight: 400;
}