/* ============================================================
   DESIGN TOKENS — ArtCol Theme
   ============================================================ */

:root {
  /* --- Decorative star (6-pointed, from logo) --- */
  --star-deco: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='16 58 22 26'><polygon points='30.82 64.93 37.45 65.16 34.33 71.01 37.45 76.86 30.83 77.08 27.32 82.7 23.8 77.08 17.18 76.85 20.29 71 17.17 65.15 23.8 64.92 27.31 59.3 30.82 64.93' fill='%23FF2CA1'/></svg>");

  /* --- Colors --- */
  --color-pink:       #FF2CA1;
  --color-pink-dark:  #D41780;
  --color-pink-light: #FF70C2;
  --color-black:      #161616;
  --color-white:      #FFFFFF;
  --color-gray-100:   #F5F5F5;
  --color-gray-200:   #E8E8E8;
  --color-gray-400:   #ABABAB;
  --color-gray-600:   #6B6B6B;
  --color-gray-800:   #2E2E2E;

  /* --- Typography --- */
  --font-heading: 'Fixel Display', sans-serif;    /* заголовки h1–h6 */
  --font-body:    'Fixel', sans-serif;             /* основний текст — FixelText */
  --font-display: 'Fixel Display', sans-serif;    /* кнопки, теги, лічильники, UI */
  --font-logo:    'Vinnytsia Sans', sans-serif;   /* ТІЛЬКИ для логотипу */

  /* --- Font sizes (fluid, clamp) --- */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.63vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  1.05rem + 1vw,    1.75rem);
  --text-2xl:  clamp(1.5rem,   1.2rem  + 1.5vw,  2.25rem);
  --text-3xl:  clamp(1.875rem, 1.4rem  + 2.38vw, 3rem);
  --text-4xl:  clamp(2.25rem,  1.6rem  + 3.25vw, 3.75rem);
  --text-hero: clamp(2.75rem,  1.8rem  + 4.75vw, 5rem);

  /* --- Font weights --- */
  /* Vinnytsia Sans: 400, 700 | Fixel Text: 400, 500, 700 | Fixel Display: 400, 500, 800 */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-extrabold: 800;  /* Fixel Display ExtraBold — лічильники, великі UI акценти */

  /* --- Line heights --- */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* --- Letter spacing --- */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;

  /* --- Spacing scale --- */
  --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 */

  /* --- Section vertical rhythm --- */
  --section-py: clamp(4rem, 2rem + 5vw, 8rem);

  /* --- Layout --- */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-px:   clamp(1rem, 4vw, 3rem);
  --grid-cols:      12;
  --grid-gap:       clamp(1rem, 2vw, 1.5rem);

  /* --- Border radius --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   5px;
  --radius-xl:   5px;
  --radius-2xl:  5px;
  --radius-full: 9999px;

  /* --- Shadows (flat design — none) --- */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-pink: none;

  /* --- Transitions --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* --- Z-index layers --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  50;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;

  /* --- Header --- */
  --header-height: clamp(64px, 8vw, 80px);
}