/* KUGUART GOLD — 01 Foundation
 * Design tokens + global/base fallback typography.
 */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Fonts */
  --kg-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --kg-font-body: "Manrope", Arial, Helvetica, sans-serif;

  /* Fluid typography */
  --kg-fs-display-xl: clamp(3.25rem, 1.90rem + 5.70vw, 7rem);       /* 52 → 112 */
  --kg-fs-h1:         clamp(2.875rem, 2.06rem + 3.45vw, 5.125rem); /* 46 → 82 */
  --kg-fs-h2:         clamp(2.375rem, 1.92rem + 1.90vw, 3.625rem); /* 38 → 58 */
  --kg-fs-h3:         clamp(1.875rem, 1.65rem + .95vw, 2.5rem);    /* 30 → 40 */
  --kg-fs-h4:         clamp(1.25rem, 1.16rem + .38vw, 1.5rem);     /* 20 → 24 */
  --kg-fs-h5:         clamp(1.0625rem, 1.04rem + .10vw, 1.125rem); /* 17 → 18 */

  --kg-fs-lead:       clamp(1.125rem, 1.08rem + .19vw, 1.25rem);   /* 18 → 20 */
  --kg-fs-body:       1rem;                                         /* 16 */
  --kg-fs-small:      .875rem;                                      /* 14 */
  --kg-fs-caption:    .75rem;                                       /* 12 */
  --kg-fs-label:      clamp(.625rem, .61rem + .06vw, .6875rem);    /* 10 → 11 */

  --kg-fs-product-card:  clamp(1.5rem, 1.36rem + .57vw, 1.875rem); /* 24 → 30 */
  --kg-fs-product-title: clamp(2.25rem, 1.84rem + 1.71vw, 3.375rem);/* 36 → 54 */
  --kg-fs-quote:         clamp(1.875rem, 1.47rem + 1.71vw, 3rem);  /* 30 → 48 */

  /* Font weights */
  --kg-fw-regular: 400;
  --kg-fw-medium: 500;
  --kg-fw-semibold: 600;

  /* Line heights */
  --kg-lh-display: .92;
  --kg-lh-h1: .98;
  --kg-lh-h2: 1.08;
  --kg-lh-h3: 1.12;
  --kg-lh-body: 1.75;
  --kg-lh-lead: 1.75;

  /* Core colors — KUGUART-GOLD RAL (jasne) */
  --kg-color-ink: #2d3033;            /* RAL 7016 Antracytowy szary — teksty, kontrasty */
  --kg-color-text: #2d3033;           /* RAL 7016 */
  --kg-color-muted: #8a8986;          /* RAL 7030 Szary kamienny */
  --kg-color-line: #d8d2c7;           /* RAL 7044 Silk grey */
  --kg-color-bg: #f4f2ed;             /* RAL 9016 Biel transportowa — tło główne */
  --kg-color-bg-secondary: #ede9e3;   /* RAL 1013 Biel perłowa — tło sekundarne */
  --kg-color-surface: #fcfbf8;        /* RAL 9010 Biel czysta — karty */
  --kg-color-accent: #b89a6a;         /* RAL 1036 Perłowy złoty */
  --kg-color-accent-soft: #c8b08a;    /* RAL 1035 Perłowy beż */
  --kg-color-accent-hover: #977e57;   /* 1036 przyciemniony — hover detali */
  --kg-color-nature: #7e8572;         /* RAL 7033 Szary khaki */
  --kg-color-error: #9f3434;
  --kg-color-success: #7e8572;        /* RAL 7033 */

  /* Layout */
  --kg-container: 1440px;
  --kg-content: 760px;
  --kg-gutter: clamp(1.25rem, 4.2vw, 5.5rem);

  /* Spacing scale */
  --kg-space-1: .25rem;
  --kg-space-2: .5rem;
  --kg-space-3: .75rem;
  --kg-space-4: 1rem;
  --kg-space-5: 1.5rem;
  --kg-space-6: 2rem;
  --kg-space-7: 3rem;
  --kg-space-8: 4rem;
  --kg-space-9: clamp(4.5rem, 8vw, 8rem);
  --kg-space-section: clamp(3.5rem, 7vw, 7.5rem);

  /* UI */
  --kg-radius-sm: 2px;
  --kg-radius-md: 4px;
  --kg-transition: 220ms ease;

  /* Motion — global reveal (08-motion.css) */
  --kg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kg-duration-reveal: 900ms;
  --kg-reveal-y: 1.15rem;
  --kg-reveal-delay: 0ms;
}

/* ==========================================================================
   02. BASE / FALLBACK TYPOGRAPHY
   Niska specyficzność przez :where() = Elementor może łatwo nadpisać.
   ========================================================================== */

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

:where(body) {
  margin: 0;
  font-family: var(--kg-font-body);
  font-size: var(--kg-fs-body);
  font-weight: var(--kg-fw-regular);
  line-height: var(--kg-lh-body);
  color: var(--kg-color-text);
  background: var(--kg-color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(p) {
  margin-top: 0;
  margin-bottom: 1.25em;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  color: var(--kg-color-ink);
  text-wrap: balance;
}

:where(h1, h2, h3) {
  font-family: var(--kg-font-display);
  font-weight: var(--kg-fw-medium);
}

:where(h1) {
  font-size: var(--kg-fs-h1);
  line-height: var(--kg-lh-h1);
  letter-spacing: -.015em;
}

:where(h2) {
  font-size: var(--kg-fs-h2);
  line-height: var(--kg-lh-h2);
  letter-spacing: -.012em;
}

:where(h3) {
  font-size: var(--kg-fs-h3);
  line-height: var(--kg-lh-h3);
  letter-spacing: -.008em;
}

:where(h4) {
  font-family: var(--kg-font-body);
  font-size: var(--kg-fs-h4);
  font-weight: var(--kg-fw-medium);
  line-height: 1.3;
  letter-spacing: -.01em;
}

:where(h5) {
  font-family: var(--kg-font-body);
  font-size: var(--kg-fs-h5);
  font-weight: var(--kg-fw-semibold);
  line-height: 1.35;
}

:where(h6) {
  font-family: var(--kg-font-body);
  font-size: var(--kg-fs-label);
  font-weight: var(--kg-fw-semibold);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
}

:where(a) {
  color: inherit;
  text-decoration-thickness: .06em;
  text-underline-offset: .18em;
  transition:
    color var(--kg-transition),
    opacity var(--kg-transition);
}

:where(a:hover) {
  color: var(--kg-color-accent-hover);
}

:where(strong, b) {
  font-weight: var(--kg-fw-semibold);
}

:where(small) {
  font-size: var(--kg-fs-small);
}