/* ==========================================================================
   Estetik Cosmetic Studio — Design Tokens
   FAZA 2: Sakura / feminine premium — warm ivory + dusty sakura paleta.
   ========================================================================== */

:root {
  /* ---------- Boje: warm ivory + sakura sistem ---------- */
  --color-ivory: #faf7f5;       /* osnovna svetla pozadina */
  --color-blush: #f6dde2;       /* vrlo svetla sakura */
  --color-blush-deep: #efcfd3;  /* puder roze */
  --color-rose: #e7c2c8;        /* izraženiji sakura akcenat */
  --color-beige: #f1e7e2;       /* svetla bež */
  --color-taupe: #8a7c7a;       /* taupe — sekundarni tekst, linije */
  --color-ink-soft: #4a4241;    /* tamni tekst */
  --color-ink: #2f2b2b;         /* najtamniji tekst / kontrast */
  --color-white: #ffffff;

  /* CTA — dusty sakura, dovoljno duboka za kontrast s tamnim tekstom */
  --color-cta: #cdaaad;
  --color-cta-hover: #bd9598;
  --color-cta-ink: #2f2b2b;

  /* Generičke pozadine (koriste ih layout-slojevi) */
  --color-bg: var(--color-ivory);
  --color-bg-alt: var(--color-beige);
  --color-bg-soft: var(--color-blush);
  --color-surface: var(--color-white);

  /* QA fix: darkened from #a49792 (~2.8:1) to clear WCAG AA 4.5:1 for real
     copy — durations, prices, labels, footer text. This token is an internal
     utility shade, not one of the client's specified brand hex values, so
     it can be tuned for legibility without touching the approved palette. */
  --color-ink-faint: #6f6360;
  --color-ink-mute: #c9bcb8;

  --color-line: #e9ded9;
  --color-line-strong: #d9c7c2;

  --color-accent: var(--color-cta);
  --color-accent-dark: var(--color-cta-hover);
  --color-accent-soft: var(--color-blush);

  --color-focus: #9c6b72;
  --color-success-bg: #f2ede3;
  --color-success-ink: #5c5334;

  /* ---------- Tipografija ---------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;

  --fs-h1: clamp(2.5rem, 4.2vw + 1rem, 4.4rem);
  --fs-h2: clamp(1.9rem, 2.2vw + 1rem, 2.85rem);
  --fs-h3: clamp(1.3rem, 1.1vw + 1rem, 1.65rem);
  --fs-lead: clamp(1.02rem, 0.4vw + 1rem, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.76rem;

  --lh-tight: 1.14;
  --lh-normal: 1.68;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation — vrlo blage, tople senke (bez čistog crnog) */
  --shadow-sm: 0 1px 3px rgba(74, 66, 65, 0.05);
  --shadow-md: 0 14px 40px rgba(74, 66, 65, 0.08);
  --shadow-lg: 0 26px 70px rgba(74, 66, 65, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 380ms;
  --duration-slow: 640ms;

  --header-height: 84px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}