/* =======================================
   (Jo Designs – typografia & värit)
======================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Jost', sans-serif;
  --color-text: #333333;
  --color-accent: #604573; /* violetti */
  --color-link: #5f2c91;
  --color-link-contrast: #4b2e6a; /* varaväri tummemmille taustoille */
  --faq-accent: #b58b4c; /* Golden ochre */
  font-size: clamp(1rem, 0.9vw + 0.6rem, 1.125rem); /* ~16px mobiilissa, max n. 18px desktopilla */

  /* --- Peruspaletti --- */
  --canyon-rose: #e9d9d1;      /* lämmin rosé */
  --golden-ochre: #b58b4c;     /* syvä hunaja */
  --sand-beige: #f3eeea;       /* luonnollinen beige */
  --linen-white: #f9f7f6;      /* paperinen valkoinen */
  --muted-brown: #5e514a;      /* lämmin tummanruskea */
  --terracotta: #ba7b55;
  --rose-gold: #B76E79;
	--blush: #E8D5D0;
	--cream: #F9F7F4;
  /* --- Light-versiot --- */
  --canyon-rose-light: #f6eeea;     /* pehmeä rosé */
  --golden-ochre-light: #e9d6b6;    /* kevyt okra */
  --sand-beige-light: #faf7f5;      /* neutraali */
  --linen-white-light: #fdfcfc;     /* lähes valkoinen */
  --sage-brush: #b7c5a6; /* pehmeä vihreäharmaa – tuo rytmiä */
  --sage-brush-light: #c9d3ba;
  --deep-olive: #6b6543;
  /* --- Kategoria-taustat --- */
  --brand-bg: var(--canyon-rose-light);     /* Brändi */
  --content-bg: var(--linen-white-light);   /* Viestintä & sisältö */
  --canva-bg: var(--sand-beige-light);      /* Canva */
  --training-bg: #f7f3ef;                   /* Koulutus */
	--editorial-text: var(--muted-brown);
  --editorial-soft: #777;
}

  /* --- Spacing Scale --- */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  
  /* --- Border Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50px;
  
  /* --- Shadows --- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
  
  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;
  
  /* --- Z-index Scale --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
}