/* ============================================
   VERAMI.STUDIO — tokens.css
   Design tokens — zmienne CSS
   Wszystkie wartosci zdefiniowane w jednym miejscu
   ============================================ */

/* Import fontow z Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap');

:root {

  /* ----------------------------------------
     KOLORY
  ---------------------------------------- */

  /* Kolory marki */
  --color-dark:       #523A34;
  --color-dark-80:    rgba(82, 58, 52, 0.80);
  --color-dark-60:    rgba(82, 58, 52, 0.60);
  --color-dark-40:    rgba(82, 58, 52, 0.40);
  --color-dark-20:    rgba(82, 58, 52, 0.20);
  --color-dark-12:    rgba(82, 58, 52, 0.12);
  --color-dark-06:    rgba(82, 58, 52, 0.06);

  --color-light:      #F1F2ED;
  --color-light-80:   rgba(241, 242, 237, 0.80);
  --color-light-50:   rgba(241, 242, 237, 0.50);
  --color-white:      #FFFFFF;

  /* Kolory semantyczne */
  --color-bg:          var(--color-light);
  --color-text:        var(--color-dark);
  --color-border:      var(--color-dark-12);
  --color-border-mid:  var(--color-dark-40);

  /* ----------------------------------------
     TYPOGRAFIA
  ---------------------------------------- */

  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  /* Nie uzywamy Cormorant — konsekwentnie Inter */

  /* Skala rozmiarow */
  --text-2xs: 0.6875rem;   /*  11px */
  --text-xs:  0.75rem;     /*  12px */
  --text-sm:  0.875rem;    /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:  1.125rem;    /*  18px */
  --text-lg:  1.375rem;    /*  22px */
  --text-xl:  1.75rem;     /*  28px */
  --text-2xl: 2.25rem;     /*  36px */
  --text-3xl: 3rem;        /*  48px */
  --text-4xl: 4rem;        /*  64px */
  --text-hero: clamp(2.75rem, 7vw, 5.5rem);

  /* Interlinie */
  --leading-tight:  1.12;
  --leading-snug:   1.32;
  --leading-normal: 1.62;
  --leading-loose:  1.82;

  /* Kerning */
  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.18em;

  /* ----------------------------------------
     SPACING
  ---------------------------------------- */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Kontenery i sekcje */
  --section-py:    clamp(5rem, 10vw, 9rem);
  --container-px:  clamp(1.25rem, 5vw, 3rem);
  --container-max: 1320px;

  /* ----------------------------------------
     RUCH / ANIMACJE
  ---------------------------------------- */

  /* Krzywne Beziera */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Czasy trwania */
  --dur-fast:  0.18s;
  --dur-mid:   0.42s;
  --dur-slow:  0.75s;
  --dur-xl:    1.1s;

  /* ----------------------------------------
     PROMIENIE ZAOKRAGLEN
  ---------------------------------------- */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* ----------------------------------------
     CIENIE
  ---------------------------------------- */

  --shadow-sm:   0 1px 6px rgba(82, 58, 52, 0.06);
  --shadow-card: 0 2px 20px rgba(82, 58, 52, 0.08),
                 0 1px 4px  rgba(82, 58, 52, 0.05);
  --shadow-hover:0 8px 40px rgba(82, 58, 52, 0.13),
                 0 2px 8px  rgba(82, 58, 52, 0.07);
  --shadow-nav:  0 1px 0 var(--color-dark-12);

}