/* ============================================================
   FLC Design Tokens
   Single source of truth for the FLC visual system.
   Inspired by Family (refero.design) — Lutheran palette.
   ============================================================ */

:root {
	/* ---------- Foundation ---------- */
	--flc-warm-canvas:     #fbfaf9;
	--flc-stone-surface:   #f2f0ed;
	--flc-parchment-card:  #f8f7f4;
	--flc-graphite:        #474645;
	--flc-charcoal:        #343433;
	--flc-pepper:          #282624;
	--flc-midnight:        #121212;
	--flc-ash:             #848281;
	--flc-fog:             #c6c6c6;
	--flc-smoke:           #a7a7a7;

	/* ---------- Brand (Lutheran) ---------- */
	--flc-lutheran-blue:   #1e5fa8;  /* primary accent */
	--flc-sage-green:      #3a8060;  /* secondary accent */
	--flc-soft-gold:       #d4a437;  /* highlight / blue's complement */
	--flc-deep-amber:      #d48f00;  /* illustration warm */
	--flc-sky-blue:        #0090ff;  /* info / occasional pop */
	--flc-liturgical-red:  #a13d2d;  /* alert / Pentecost / Reformation */

	/* ---------- Semantic tokens ---------- */
	--flc-color-bg:           var(--flc-warm-canvas);
	--flc-color-bg-recessed:  var(--flc-parchment-card);
	--flc-color-bg-card:      #ffffff;
	--flc-color-border:       var(--flc-stone-surface);
	--flc-color-text:         var(--flc-graphite);
	--flc-color-heading:      var(--flc-charcoal);
	--flc-color-muted:        var(--flc-ash);
	--flc-color-accent:       var(--flc-lutheran-blue);
	--flc-color-accent-alt:   var(--flc-sage-green);
	--flc-color-highlight:    var(--flc-soft-gold);
	--flc-color-cta-bg:       var(--flc-lutheran-blue);
	--flc-color-cta-bg-hover: #174a86;
	--flc-color-cta-text:     #ffffff;

	/* ---------- Typography ---------- */
	--flc-font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
	--flc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	--flc-fw-regular:   400;
	--flc-fw-medium:    500;
	--flc-fw-semibold:  600;

	--flc-text-caption:    12px;
	--flc-text-body:       16px;
	--flc-text-body-lg:    17px;
	--flc-text-h-sm:       19px;
	--flc-text-h:          24px;
	--flc-text-h-md:       32px;
	--flc-text-h-lg:       40px;
	--flc-text-display:    56px;

	--flc-leading-tight:   1.05;
	--flc-leading-snug:    1.15;
	--flc-leading-normal:  1.5;
	--flc-leading-relaxed: 1.6;

	--flc-tracking-display:  -2px;
	--flc-tracking-h-lg:     -1.1px;
	--flc-tracking-h-md:     -0.7px;
	--flc-tracking-h:        -0.5px;
	--flc-tracking-h-sm:     -0.25px;
	--flc-tracking-body:     -0.2px;
	--flc-tracking-caption:  -0.14px;

	/* ---------- Spacing (4px base) ---------- */
	--flc-space-4:    4px;
	--flc-space-8:    8px;
	--flc-space-12:   12px;
	--flc-space-16:   16px;
	--flc-space-24:   24px;
	--flc-space-32:   32px;
	--flc-space-48:   48px;
	--flc-space-64:   64px;
	--flc-space-80:   80px;
	--flc-space-96:   96px;
	--flc-space-120:  120px;

	/* ---------- Radii ---------- */
	--flc-radius-sm:   6px;
	--flc-radius-md:   10px;  /* cards */
	--flc-radius-lg:   12px;  /* recessed panels */
	--flc-radius-xl:   24px;  /* large surfaces, phone mockups */
	--flc-radius-pill: 32px;  /* buttons */
	--flc-radius-icon: 40px;  /* circular icon containers */

	/* ---------- Shadows ---------- */
	/* Inset stone border — the Family signature; replaces drop shadows on cards */
	--flc-shadow-inset:  inset 0 0 0 1px var(--flc-stone-surface);
	--flc-shadow-nav:    rgba(0, 0, 0, 0.04) 0 0 0 1px;
	--flc-shadow-lg:     rgba(0, 0, 0, 0.15) 0 0 24px 0;
	--flc-shadow-hover:  rgba(0, 0, 0, 0.04) 0 1px 6px 0,
	                     rgba(0, 0, 0, 0.05) 0 0 24px 0;

	/* ---------- Layout ---------- */
	--flc-content-width:  1200px;
	--flc-section-gap:    32px;
	--flc-card-padding:   32px;

	/* ---------- Motion ---------- */
	--flc-ease:        ease;
	--flc-ease-spring: cubic-bezier(0.19, 1, 0.22, 1);
	--flc-dur-fast:    0.2s;
	--flc-dur-med:     0.4s;
	--flc-dur-slow:    1s;
}