/* ==========================================================================
   MotoTransfer – Design Tokens v3
   ========================================================================== */

:root {
  /* --- Kolory tła --- */
  --color-bg:          #F9F8F6;
  --color-bg-alt:      #F3F0EB;
  --color-bg-card:     #FFFFFF;
  --color-bg-subtle:   #EDE8E0;
  --color-bg-warm:     #F6F3EE;

  /* --- Akcenty --- */
  --color-amber:       #A85D1A;
  --color-amber-light: #C4722A;
  --color-amber-dark:  #7A4010;
  --color-amber-pale:  #F3E4D0;
  --color-amber-glow:  rgba(168,93,26,0.09);
  --color-amber-glow2: rgba(168,93,26,0.05);

  --color-brown:       #5A3018;
  --color-brown-pale:  #E8D5C0;

  /* --- Tekst --- */
  --color-text:        #1C1410;
  --color-text-muted:  #5C4838;
  --color-text-faint:  #9C8878;
  --color-text-light:  #C0B0A0;

  /* --- Obramowania --- */
  --color-border:        rgba(168,93,26,0.20);
  --color-border-subtle: rgba(92,51,23,0.09);
  --color-border-light:  rgba(92,51,23,0.05);

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* --- Typografia – PROSTA, MNIEJSZA --- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Mniejsza skala – charakter sklepowy */
  --fs-xs:   0.70rem;
  --fs-sm:   0.80rem;
  --fs-base: 0.875rem;
  --fs-md:   0.9375rem;
  --fs-lg:   1.0625rem;
  --fs-xl:   1.1875rem;
  --fs-2xl:  1.375rem;
  --fs-3xl:  1.625rem;
  --fs-4xl:  2rem;
  --fs-5xl:  2.5rem;
  --fs-hero: clamp(2rem, 5vw, 3.25rem);

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.72;

  --ls-tight:  -0.025em;
  --ls-snug:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.09em;
  --ls-widest:  0.18em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

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

  --section-py:       clamp(3rem, 7vw, 6rem);
  --container:        min(86rem, 100% - 2.5rem);
  --container-narrow: min(62rem, 100% - 2.5rem);

  /* --- Kształty --- */
  --radius-sm:   5px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-pill: 9999px;

  /* --- Cienie --- */
  --shadow-xs:    0 1px 3px rgba(92,51,23,0.06), 0 1px 2px rgba(92,51,23,0.04);
  --shadow-sm:    0 2px 8px rgba(92,51,23,0.08);
  --shadow-md:    0 6px 24px rgba(92,51,23,0.10);
  --shadow-lg:    0 16px 48px rgba(92,51,23,0.12);
  --shadow-amber: 0 4px 20px rgba(168,93,26,0.20);
  --shadow-card:  0 1px 12px rgba(92,51,23,0.07), 0 0 0 1px rgba(92,51,23,0.05);

  /* --- Przejścia --- */
  --transition-fast:   140ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   260ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   500ms cubic-bezier(0,0,0.2,1);
  --transition-spring: 360ms cubic-bezier(0.34,1.56,0.64,1);

  /* --- Z-index --- */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-sticky: 100;
  --z-nav:    200;
  --z-overlay:300;
}