/* ============================================================
   BOOKFOLINO — Colors & Type
   Source of truth: reference/DESIGN-SYSTEM.md (theme.json)
   ============================================================ */

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

:root {
  /* ---------- BRAND ---------- */
  --bf-primary:        #4f39f6;   /* brand fiolet — buttons, links, accents */
  --bf-primary-dark:   #3f2dd6;   /* hover states */
  --bf-primary-light:  #7c3aed;   /* gradient secondary stop */
  --bf-primary-tint:   #eeebff;   /* very light wash */
  --bf-synced:         #7a00df;   /* block-aware sync indicator (do not use for marketing) */

  --bf-gradient-primary: linear-gradient(135deg, #4f39f6 0%, #7c3aed 100%);

  /* ---------- STATUS ---------- */
  --bf-success:        #10b981;
  --bf-success-tint:   #ecfdf5;
  --bf-warning:        #f59e0b;   /* also: rating stars */
  --bf-warning-tint:   #fef3c7;
  --bf-error:          #ef4444;
  --bf-error-tint:     #fee2e2;
  --bf-info:           #3b82f6;
  --bf-info-tint:      #f0f9ff;

  /* ---------- FEATURED TIERS ---------- */
  --bf-tier-silver: linear-gradient(135deg, #94a3b8, #cbd5e1);
  --bf-tier-gold:   linear-gradient(135deg, #fcd34d, #f59e0b);
  --bf-tier-gold-glow: 0 1px 3px rgba(245, 158, 11, 0.3);

  /* ---------- NEUTRALS ---------- */
  --bf-fg-1:           #111827;   /* body text — primary */
  --bf-fg-2:           #6b7280;   /* secondary text, captions */
  --bf-fg-3:           #9ca3af;   /* disabled, placeholders */
  --bf-fg-on-primary:  #ffffff;

  --bf-border:         #e5e7eb;   /* dividers, card borders */
  --bf-border-light:   #f3f4f6;   /* subtle dividers */

  --bf-bg:             #ffffff;   /* cards, content blocks */
  --bf-bg-page:        #f9fafb;   /* page background */
  --bf-bg-subtle:      #f3f4f6;   /* section backgrounds */

  /* ---------- TYPE FAMILIES ---------- */
  --bf-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bf-font-serif: 'Playfair Display', Georgia, serif;
  --bf-font-mono:  Menlo, Monaco, 'Courier New', monospace;

  /* ---------- TYPE SCALE ---------- */
  --bf-fs-xs:   12px;
  --bf-fs-sm:   14px;
  --bf-fs-base: 16px;
  --bf-fs-lg:   18px;
  --bf-fs-xl:   20px;
  --bf-fs-2xl:  24px;
  --bf-fs-3xl:  32px;
  --bf-fs-4xl:  48px;
  --bf-fs-5xl:  72px;

  /* ---------- SPACING (theme.json preset) ---------- */
  --bf-space-1:  4px;
  --bf-space-2:  8px;
  --bf-space-3:  12px;
  --bf-space-4:  16px;
  --bf-space-5:  24px;
  --bf-space-6:  32px;
  --bf-space-7:  48px;
  --bf-space-8:  64px;
  --bf-space-9:  96px;

  /* ---------- RADIUS ---------- */
  --bf-radius-sm:   6px;
  --bf-radius-md:  10px;
  --bf-radius-lg:  12px;
  --bf-radius-xl:  14px;
  --bf-radius-2xl: 16px;
  --bf-radius-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --bf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --bf-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
  --bf-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --bf-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --bf-shadow-focus: 0 0 0 3px rgba(79, 57, 246, 0.18);

  /* ---------- MOTION ---------- */
  --bf-transition-fast: 150ms ease;
  --bf-transition-base: 250ms ease;
  --bf-transition-slow: 400ms ease;
  --bf-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --bf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SEMANTIC TYPE RECIPES
   ============================================================ */

.bf-hero,
h1.bf-hero {
  font-family: var(--bf-font-serif);
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: var(--bf-fg-1);
  text-wrap: balance;
}

.bf-h1 {
  font-family: var(--bf-font-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--bf-fg-1);
  text-wrap: balance;
}

.bf-h2 {
  font-family: var(--bf-font-sans);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--bf-fg-1);
  text-wrap: balance;
}

.bf-h3 {
  font-family: var(--bf-font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--bf-fg-1);
}

.bf-h4 {
  font-family: var(--bf-font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bf-fg-1);
}

.bf-lead {
  font-family: var(--bf-font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--bf-fg-2);
  text-wrap: pretty;
}

.bf-body,
p.bf-body {
  font-family: var(--bf-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bf-fg-1);
  text-wrap: pretty;
}

.bf-small {
  font-family: var(--bf-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bf-fg-2);
}

.bf-caption {
  font-family: var(--bf-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bf-fg-3);
}

.bf-label {
  font-family: var(--bf-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bf-fg-2);
}

.bf-quote {
  font-family: var(--bf-font-serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--bf-fg-1);
}

.bf-mono {
  font-family: var(--bf-font-mono);
  font-size: 14px;
  color: var(--bf-fg-1);
}

/* ============================================================
   BASE TAG MAPPINGS (opt-in: scope under .bf-prose)
   ============================================================ */

.bf-prose { color: var(--bf-fg-1); font-family: var(--bf-font-sans); }
.bf-prose h1 { font-family: var(--bf-font-serif); font-size: 48px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; }
.bf-prose h2 { font-family: var(--bf-font-sans); font-size: 32px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; margin-top: 2em; }
.bf-prose h3 { font-family: var(--bf-font-sans); font-size: 24px; font-weight: 700; line-height: 1.3; margin-top: 1.6em; }
.bf-prose p  { font-size: 16px; line-height: 1.6; color: var(--bf-fg-1); }
.bf-prose a  { color: var(--bf-primary); text-decoration: underline; text-underline-offset: 3px; }
.bf-prose a:hover { color: var(--bf-primary-dark); }
.bf-prose code { font-family: var(--bf-font-mono); font-size: 0.9em; background: var(--bf-bg-subtle); padding: 2px 6px; border-radius: var(--bf-radius-sm); }

/* ============================================================
   Bridge: theme.json `--wp--preset--*` ↔ design system `--bf-*`
   Aliases — pozwalają używać krótszych nazw z design system w
   nowo pisanym CSS, zachowując kompatybilność ze starym kodem.
   ============================================================ */
:root {
  /* Bridge starych theme.json tokens → bf-* */
  --wp--preset--color--primary: var(--bf-primary);
  --wp--preset--color--text: var(--bf-fg-1);
  --wp--preset--color--text-muted: var(--bf-fg-2);
  --wp--preset--color--text-heading: var(--bf-fg-1);
  --wp--preset--color--border: var(--bf-border);
  --wp--preset--color--bg-page: var(--bf-bg-page);
  --wp--preset--color--bg-subtle: var(--bf-bg-subtle);
}