/* === Design tokens === */

:root {
  /* === Brand colors — z logo === */
  --belloria-gold:        #B89545;
  --belloria-gold-warm:   #C9A35A;
  --belloria-gold-deep:   #8F7028;
  --belloria-burgundy:    #5D2A2E;
  --belloria-burgundy-deep: #3F1B1F;

  /* === Ciepły kontekst === */
  --belloria-cream:       #F4EDE0;
  --belloria-paper:       #FAF6EC;
  --belloria-ink:         #1F1A17;
  --belloria-stone:       #2A2520;
  --belloria-mist:        #DDD2C0;

  /* === Akcenty „ryzykowne" === */
  --belloria-sage:        #7C8471;
  --belloria-rust:        #A85A3F;
  --belloria-ink-blue:    #1B2538;

  /* === Subtle shifts === */
  --gold-shift-1: #B69443;
  --gold-shift-2: #BA9647;
  --burgundy-shift-1: #5B2A2E;
  --burgundy-shift-2: #5F2B2F;

  /* === Typography === */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Variable axes — używaj wartości nie-okrągłych */
  --w-display-light:    320;
  --w-display-regular:  420;
  --w-display-medium:   540;
  --w-body-regular:     400;
  --w-body-medium:      530;
  --w-body-bold:        720;

  /* === Type scale (fluid) === */
  --fs-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.84rem);
  --fs-sm:   clamp(0.88rem, 0.84rem + 0.25vw, 0.96rem);
  --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.08rem);
  --fs-md:   clamp(1.12rem, 1.06rem + 0.4vw, 1.22rem);
  --fs-lg:   clamp(1.4rem, 1.25rem + 0.7vw, 1.7rem);
  --fs-xl:   clamp(1.85rem, 1.6rem + 1.2vw, 2.45rem);
  --fs-2xl:  clamp(2.4rem, 2rem + 2vw, 3.4rem);
  --fs-3xl:  clamp(3rem, 2.4rem + 3vw, 4.6rem);
  --fs-4xl:  clamp(3.6rem, 2.8rem + 4vw, 6rem);
  --fs-hero: clamp(3.2rem, 2.6rem + 4.5vw, 7.2rem);

  /* === Spacing — asymetrycznie === */
  --space-1: 0.4rem;
  --space-2: 0.7rem;
  --space-3: 1.05rem;
  --space-4: 1.45rem;
  --space-5: 2.1rem;
  --space-6: 2.85rem;
  --space-7: 3.7rem;
  --space-8: 4.9rem;
  --space-9: 6.3rem;
  --space-10: 8.4rem;

  /* === Section padding === */
  --section-pad-y: clamp(4.5rem, 4rem + 3vw, 7.5rem);
  --section-pad-x: clamp(1.4rem, 0.8rem + 3vw, 4.2rem);
  --container-max: 1280px;

  /* === Easing === */
  --ease-organic:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:       cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Durations — celowo nie-okrągłe === */
  --duration-fast: 230ms;
  --duration-base: 380ms;
  --duration-slow: 720ms;
  --duration-epic: 1180ms;

  /* === Shadows — asymetryczne === */
  --shadow-soft:   2px 7px 15px rgba(31, 26, 23, 0.08), -1px 2px 8px rgba(31, 26, 23, 0.05);
  --shadow-warm:   3px 9px 20px rgba(63, 27, 31, 0.12), -2px 3px 12px rgba(63, 27, 31, 0.06);
  --shadow-deep:   4px 14px 28px rgba(31, 26, 23, 0.18), -2px 4px 16px rgba(31, 26, 23, 0.08);
  --shadow-glow-gold: 0 0 0 1px rgba(184, 149, 69, 0.3), 0 4px 20px rgba(184, 149, 69, 0.15);

  /* === Borders === */
  --border-hairline: 1px solid color-mix(in srgb, var(--belloria-ink) 12%, transparent);
  --border-gold:     1px solid var(--belloria-gold);

  /* === Radii — celowo nie identyczne === */
  --radius-sm:  0.35rem;
  --radius-md:  0.6rem;
  --radius-lg:  1.1rem;
  --radius-xl:  1.85rem;

  /* === z-indexes === */
  --z-header:    100;
  --z-mobile-menu: 110;
  --z-sticky-cta: 90;
  --z-lightbox: 200;
  --z-cursor: 9999;

  /* === Header height === */
  --header-h: 84px;

  /* === Breakpoints (do JS) === */
  --bp-narrow: 580px;
  --bp-mid:    920px;
  --bp-wide:   1280px;
}