/* =========================================================
   NEHVONEN THEME
   Asiakkaan brändi ja koko sivuston pääsäädöt.

   Uudelle asiakkaalle muuta yleensä vain tätä tiedostoa.
========================================================= */

:root {
  /* 1. Brändivärit */
  --color-brand-dark: #071019;
  --color-brand-dark-2: #0b1520;
  --color-brand-blue: #013391;
  --color-brand-blue-2: #0b2338;
  --color-brand-accent: #f28c00;
  --color-brand-accent-2: #79ff0b;

  --color-text-dark: #071019;
  --color-text-body: #26323d;
  --color-text-muted: #6b747d;
  --color-text-light: #ffffff;
  --color-text-soft-light: #dce3ea;

  --color-bg-light: #f4f6f8;
  --color-bg-light-2: #f3f5f7;
  --color-bg-white: #ffffff;

  /* 2. RGB-arvot läpinäkyville overlay-väreille */
  --rgb-brand-dark: 7, 16, 25;
  --rgb-brand-dark-2: 11, 21, 32;
  --rgb-brand-blue: 2, 49, 105;
  --rgb-brand-accent: 242, 140, 0;
  --rgb-text-light: 255, 255, 255;

  /* 3. Gradientit */
  --gradient-dark: linear-gradient(180deg, var(--color-brand-dark) 0%, var(--color-brand-blue) 100%);
  --gradient-dark-angle: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-blue) 100%);
  --gradient-dark-soft: linear-gradient(180deg, var(--color-brand-dark) 0%, var(--color-brand-dark-2) 100%);
  --gradient-accent-glow: radial-gradient(circle at 50% 0%, rgba(var(--rgb-brand-accent), .12), transparent 28%);

  /* 4. Fontit */
  --font-base: Arial, Helvetica, sans-serif;
  --font-heading: Arial, Helvetica, sans-serif;

  /* 5. Otsikkokoot desktop */
  --font-h1-desktop: clamp(42px, 4.2vw, 70px);
  --font-h2-desktop: clamp(30px, 3.4vw, 52px);
  --font-h3-desktop: clamp(22px, 1.8vw, 30px);

  /* 6. Otsikkokoot mobiili */
  --font-h1-mobile: clamp(24px, 6.6vw, 32px);
  --font-h2-mobile: clamp(25px, 6.8vw, 36px);
  --font-h3-mobile: clamp(21px, 5.8vw, 29px);

  /* 7. Leipäteksti */
  --font-body-desktop: 17px;
  --font-body-mobile: 16px;
  --line-body: 1.65;
  --line-heading: 1.02;
  --letter-heading: -0.055em;

  /* 8. Sivun leveydet ja reunavälit */
  --page-padding-desktop: clamp(28px, 4vw, 64px);
  --page-padding-mobile: clamp(16px, 5vw, 22px);

  --container: 1180px;
  --container-wide: 1460px;
  --copy-width: 720px;
  --text-width: 680px;
  --head-width: 920px;
  --panel-width: 700px;
  --panel-text-width: 560px;

  /* 9. Section-välit ja korkeudet */
  --section-space-sm: clamp(44px, 5vw, 70px);
  --section-space-md: clamp(58px, 7vw, 96px);
  --section-space-lg: clamp(70px, 8vw, 125px);
  --section-space-xl: clamp(90px, 10vw, 150px);

  --hero-height-desktop: 100svh;
  --hero-height-mobile: 100svh;
  --section-min-height: min(760px, 92svh);
  --bg-section-min-height: clamp(560px, 64svh, 760px);

  /* 10. Muodot */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* 11. Varjot */
  --shadow-card: 0 16px 42px rgba(0, 0, 0, .18);
  --shadow-card-strong: 0 18px 44px rgba(0, 0, 0, .28);
  --shadow-panel: 0 26px 70px rgba(0, 0, 0, .32);

  /* 12. Napit */
  --button-radius: var(--radius-pill);
  --button-padding-y: 14px;
  --button-padding-x: 24px;

  /* 13. Vanhojen neh-muuttujien yhteensopivuus */
  --neh-dark: var(--color-brand-dark);
  --neh-dark-2: var(--color-brand-dark-2);
  --neh-blue: var(--color-brand-blue);
  --neh-orange: var(--color-brand-accent);
  --neh-green: var(--color-brand-accent-2);
  --neh-text: var(--color-text-soft-light);
  --neh-text-dark: var(--color-text-dark);
  --neh-body: var(--font-base);
  --neh-heading: var(--font-heading);

  --neh-page-x: var(--page-padding-desktop);
  --neh-container: var(--container);
  --neh-container-wide: var(--container-wide);

  --neh-section-min: var(--section-min-height);
  --neh-section-y: var(--section-space-lg);
  --neh-split-y: var(--section-space-lg);
  --neh-bg-section-min: var(--bg-section-min-height);
  --neh-bg-section-y: var(--section-space-xl);

  --neh-heading-section: var(--font-h2-desktop);
  --neh-heading-large: var(--font-h2-desktop);
  --neh-heading-line: var(--line-heading);
  --neh-heading-tight: var(--letter-heading);

  --neh-service-h1-desktop: var(--font-h1-desktop);
  --neh-service-h2-desktop: var(--font-h2-desktop);
  --neh-service-h3-desktop: var(--font-h3-desktop);
  --neh-service-h1-mobile: var(--font-h1-mobile);
  --neh-service-h2-mobile: var(--font-h2-mobile);
  --neh-service-h3-mobile: var(--font-h3-mobile);

  --neh-service-copy-width: var(--copy-width);
  --neh-service-text-width: var(--text-width);
  --neh-service-head-width: var(--head-width);
  --neh-service-panel-width: var(--panel-width);
  --neh-service-panel-text-width: var(--panel-text-width);
}

@media (max-width: 759px) {
  :root {
    --neh-page-x: var(--page-padding-mobile);
    --neh-heading-section: var(--font-h2-mobile);
    --neh-heading-large: var(--font-h2-mobile);

    --neh-service-copy-width: 100%;
    --neh-service-text-width: 100%;
    --neh-service-head-width: 100%;
    --neh-service-panel-width: 100%;
    --neh-service-panel-text-width: 100%;
  }
}