/* ==========================================================================
   DESIGN TOKENS
   Change these to re-skin the entire site. Nothing below this file should
   contain a hard-coded color, font stack or spacing value.
   ========================================================================== */

:root {
  /* ---- Color: warm editorial neutrals + deep olive from the I.KOLEVA logo ---- */
  --color-background: #faf7f1;
  --color-surface: #ffffff;
  --color-surface-alt: #f2ede3;
  --color-text: #2a2620;
  --color-text-soft: #4d473d;
  --color-muted: #7a7166;
  --color-border: #e6ddcd;

  --color-primary: #4d4b30;       /* deep olive, from the butterfly mark */
  --color-primary-dark: #363421;
  --color-primary-soft: #eef0e4;

  --color-accent: #b08d57;        /* warm gold, premium accent */
  --color-accent-dark: #8f6f3f;
  --color-accent-soft: #f3e9d7;

  --color-success: #4c7a5b;
  --color-error: #a24437;

  /* ---- Glass effect ---- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-dark: rgba(45, 42, 32, 0.45);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-blur: 18px;
  --glass-shadow: 0 12px 40px rgba(43, 38, 22, 0.08);

  /* ---- Typography ---- */
  --font-heading: "Playfair Display", "PT Serif", Georgia, serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* Base scale reduced 15% site-wide per client request (was 0.8125/0.9375/1.0625/1.25/1.75/2.5/3.25/4.25) */
  --fs-xs: 0.6906rem;
  --fs-sm: 0.7969rem;
  --fs-base: 0.9031rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.4875rem;
  --fs-xl: 2.125rem;
  --fs-2xl: 2.7625rem;
  --fs-3xl: 3.6125rem;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  /* ---- Spacing scale (tightened for a more compact layout) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 2.75rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-narrow: 760px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-med: 0.45s var(--ease);
}

/* Optional dark-surface sections (e.g. footer, community) reuse the same
   tokens but flipped — scope with .theme-dark on a section wrapper. */
.theme-dark {
  --color-background: #262319;
  --color-surface: #302c20;
  --color-text: #f4efe4;
  --color-text-soft: #d9d0bd;
  --color-muted: #a99f8b;
  --color-border: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.16);
}