/* ============================================================
   SAKO Design System — CSS Tokens
   sako.com.pl | Polska elegancja od 1991
   ============================================================ */

:root {
  /* ── Neutrals ── */
  --sako-black:       #0F0E0D;
  --sako-charcoal:    #1C1A17;
  --sako-stone:       #3A3530;
  --sako-warm-gray:   #8C857B;
  --sako-sand:        #C4B9AB;
  --sako-cream:       #F5F0E8;
  --sako-ivory:       #FAF7F2;
  --sako-white:       #FDFCFA;

  /* ── B2C Accent — Gold ── */
  --sako-gold:        #C9A96E;
  --sako-gold-dark:   #A07840;
  --sako-gold-light:  #E0C897;
  --sako-champagne:   #EDD9B0;
  --sako-gold-muted:  #7A5C30;

  /* ── B2B Accent — Navy ── */
  --sako-navy:        #1B2D4F;
  --sako-navy-mid:    #2A4270;
  --sako-steel:       #4A6080;
  --sako-sky:         #7A9AB8;
  --sako-fog:         #C0CFDF;

  /* ── Semantic: Surfaces ── */
  --surface-primary:    var(--sako-white);
  --surface-secondary:  var(--sako-cream);
  --surface-ivory:      var(--sako-ivory);
  --surface-dark:       var(--sako-charcoal);
  --surface-darker:     var(--sako-black);
  --surface-overlay:    rgba(15, 14, 13, 0.55);

  /* ── Semantic: Text ── */
  --text-primary:        var(--sako-black);
  --text-secondary:      var(--sako-stone);
  --text-muted:          var(--sako-warm-gray);
  --text-on-dark:        var(--sako-cream);
  --text-on-dark-muted:  var(--sako-sand);

  /* ── Semantic: Accents ── */
  --accent-b2c:          var(--sako-gold);
  --accent-b2c-hover:    var(--sako-gold-dark);
  --accent-b2c-subtle:   var(--sako-champagne);
  --accent-b2b:          var(--sako-navy);
  --accent-b2b-hover:    var(--sako-navy-mid);
  --accent-b2b-subtle:   var(--sako-fog);

  /* ── Semantic: Borders ── */
  --border-hairline:  rgba(58, 53, 48, 0.15);
  --border-medium:    rgba(58, 53, 48, 0.30);
  --border-strong:    var(--sako-stone);
  --border-on-dark:   rgba(245, 240, 232, 0.15);

  /* ── Interactive ── */
  --focus-ring:   var(--sako-gold);
  --link-color:   var(--sako-stone);
  --link-hover:   var(--sako-black);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.625rem;
  --text-4xl:  3.5rem;
  --text-5xl:  4.5rem;
  --text-6xl:  6rem;
  --text-hero: clamp(2.5rem, 6vw, 5.5rem);

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-widest:   0.15em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Radii ── */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(15, 14, 13, 0.08);
  --shadow-md: 0 4px 24px rgba(15, 14, 13, 0.12);
  --shadow-lg: 0 12px 48px rgba(15, 14, 13, 0.18);
  --shadow-xl: 0 24px 80px rgba(15, 14, 13, 0.24);

  /* ── Transitions ── */
  --ease-out:       cubic-bezier(0.25, 0, 0, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       400ms;

  /* ── Layout ── */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --nav-height:    72px;
}