/* ==========================================================================
   JOBA Stolárstvo — Design Tokens
   ========================================================================== */

:root {
  /* ── Farby: Primárne ─────────────────────────────── */
  --color-primary:             #8B6914;
  --color-primary-light:       #C9A96A;
  --color-primary-dark:        #6B4F0E;
  --color-primary-glow:        rgba(139, 105, 20, 0.15);

  /* ── Farby: Pozadia ──────────────────────────────── */
  --color-bg-cream:            #FAF8F5;
  --color-bg-warm:             #F3EDE4;
  --color-bg-dark:             #1A1A18;
  --color-bg-card:             #FFFFFF;

  /* ── Farby: Text ─────────────────────────────────── */
  --color-text-primary:        #2C2C2A;
  --color-text-secondary:      #6B6B65;
  --color-text-muted:          #9C9C94;
  --color-text-on-dark:        #FAF8F5;
  --color-text-on-dark-muted:  #A8A89E;

  /* ── Farby: Funkčné ──────────────────────────────── */
  --color-border:              #E5E0D8;
  --color-border-strong:       #D1C8B8;
  --color-overlay:             rgba(26, 26, 24, 0.55);
  --color-overlay-heavy:       rgba(26, 26, 24, 0.75);

  /* ── Typografia ──────────────────────────────────── */
  --font-heading:     'DM Serif Display', Georgia, serif;
  --font-subheading:  'Josefin Sans', 'Helvetica Neue', sans-serif;
  --font-body:        'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  /* ── Typografia: Škála ───────────────────────────── */
  --text-hero:        clamp(2.8rem, 6vw, 5.5rem);
  --text-hero-lh:     1.02;
  --text-hero-ls:     -0.025em;

  --text-h1:          clamp(2rem, 4vw, 3.5rem);
  --text-h1-lh:       1.1;
  --text-h1-ls:       -0.015em;

  --text-h2:          clamp(1.5rem, 3vw, 2.5rem);
  --text-h2-lh:       1.15;
  --text-h2-ls:       -0.01em;

  --text-h3:          clamp(1.25rem, 2vw, 1.75rem);
  --text-h3-lh:       1.25;
  --text-h3-ls:       -0.005em;

  --text-label:       0.75rem;
  --text-label-lh:    1.4;
  --text-label-ls:    0.15em;

  --text-body:        clamp(1rem, 1.1vw, 1.125rem);
  --text-body-lh:     1.75;

  --text-small:       0.875rem;
  --text-small-lh:    1.6;

  /* ── Priestor ────────────────────────────────────── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.5rem;
  --space-6:    2rem;
  --space-7:    3rem;
  --space-8:    4rem;
  --space-9:    6rem;
  --space-10:   8rem;
  --space-11:   10rem;
  --space-12:   14rem;

  /* ── Layout ──────────────────────────────────────── */
  --container-max:      1320px;
  --container-narrow:   860px;
  --container-padding:  clamp(1.25rem, 5vw, 4rem);
  --grid-gutter:        clamp(1.5rem, 3vw, 2rem);

  /* ── Border radius ───────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ── Tiene ───────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(44,44,42,0.05), 0 1px 3px rgba(44,44,42,0.07);
  --shadow-md:    0 2px 4px rgba(44,44,42,0.04), 0 6px 16px rgba(44,44,42,0.08);
  --shadow-lg:    0 4px 8px rgba(44,44,42,0.04), 0 12px 32px rgba(44,44,42,0.1);
  --shadow-xl:    0 8px 16px rgba(44,44,42,0.06), 0 24px 64px rgba(44,44,42,0.14);

  /* ── Easing ──────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Transitions ─────────────────────────────────── */
  --t-fast:     150ms;
  --t-normal:   300ms;
  --t-slow:     500ms;
  --t-reveal:   800ms;
}