/* ═══════════════════════════════════════════
   LAPLAND LKV — Design Tokens
   Colors + Typography + Base semantic styles
   Source: Brandbook 3/2026 + laplandlkv-web/style.css
   ═══════════════════════════════════════════ */

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

:root {
  /* ── BRAND PALETTE (Brandbook 3/2026) ──
     Yhdessä julkaisussa: 1 tumma pääväri + 1 vaalea tausta
     + korkeintaan 1 pehmeä korosteväri. */
  --snow:          #F4F5F7;  /* Päätausta, ilmavuus */
  --mist:          #D9DDE6;  /* Toissijaiset pinnat, viivat, kortit */
  --arctic:        #A9B7D4;  /* Korostukset, viivat — kevyt, viileä */
  --dusty:         #E7B4B0;  /* Pehmeä korostus — vain harkiten */
  --warm-rose:     #D99C96;  /* CTA-detalji — ei isoina pintoina */
  --charcoal:      #222222;  /* Teksti, logo — ensisijainen tekstiväri */
  --midnight:      #3E547F;  /* Syvät taustat, otsikot tummilla alueilla */
  --midnight-dark: #2D3F61;  /* Hover/press syvennys */

  /* Johdannaisvärit (web-toteutuksesta) */
  --text-muted:    #666666;
  --text-dim:      #999999;
  --line-on-dark:  rgba(255, 255, 255, 0.08);
  --line-on-light: rgba(34, 34, 34, 0.08);

  /* ── SEMANTTISET ROOLIT ── */
  --bg:            var(--snow);
  --bg-raised:     #FFFFFF;
  --bg-inverse:    var(--charcoal);
  --bg-deep:       var(--midnight);

  --fg:            var(--charcoal);
  --fg-muted:      var(--text-muted);
  --fg-dim:        var(--text-dim);
  --fg-inverse:    #FFFFFF;
  --fg-accent:     var(--midnight);

  --line:          var(--mist);
  --line-strong:   var(--arctic);

  /* ── TYPOGRAFIA ──
     Brandbook 3/2026: max 2 fonttiperhettä, ei käsinkirjoitettuja, ei koristeita.
     Otsikot: Playfair Display (tai muu hillitty serif).
     Leipä:   Aptos → Inter → Helvetica Now → system fallback. */
  --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:     'Aptos', 'Aptos Display', 'Inter',
                   'Helvetica Now Text', 'Helvetica Now',
                   -apple-system, BlinkMacSystemFont,
                   'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scale — clamp() responsiiviseen skaalaukseen */
  --fs-display:    clamp(40px, 6vw, 72px);
  --fs-h1:         clamp(32px, 5vw, 52px);
  --fs-h2:         clamp(26px, 3.5vw, 36px);
  --fs-h3:         clamp(18px, 2.5vw, 22px);
  --fs-lead:       17px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    13px;
  --fs-eyebrow:    11px;

  --lh-tight:      1.2;   /* otsikot */
  --lh-snug:       1.4;
  --lh-body:       1.7;   /* leipäteksti */
  --lh-loose:      1.75;

  --ls-eyebrow:    0.14em;
  --ls-label:      0.08em;
  --ls-button:     0.04em;

  /* ── SPACING ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  88px;      /* section pad */
  --s-10: 120px;

  --section-pad:    88px;
  --container-max:  1100px;
  --container-pad:  40px;

  /* ── CORNERS ── Brändi suosii suoria viivoja; radius pidetään pienenä. */
  --r-0:   0px;
  --r-1:   2px;      /* napit, kortit, input */
  --r-2:   4px;
  --r-full: 999px;   /* vain pyöreille avatareille */

  /* ── BORDERS ── 0.5px hiusviiva on keskeinen motiivi. */
  --border-hair:   0.5px solid var(--line);
  --border-hair-d: 0.5px solid rgba(255, 255, 255, 0.08);
  --border-focus:  0.5px solid var(--arctic);

  /* ── SHADOWS ── Erittäin hillitty; ei dramaattista syvyyttä. */
  --shadow-card-hover:  0 6px 28px rgba(0, 0, 0, 0.09);
  --shadow-nav:         0 2px 20px rgba(0, 0, 0, 0.30);
  --shadow-float:       0 2px 12px rgba(0, 0, 0, 0.20);
  --shadow-modal:       0 20px 60px rgba(15, 26, 43, 0.25);

  /* ── TRANSITIONS ── */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:        0.2s ease;
  --t-base:        0.35s ease;
  --t-reveal:      0.6s ease-out;

  /* ── OVERLAYS ── Käytössä hero-kuvien päällä */
  --hero-overlay:  linear-gradient(to bottom,
                     rgba(20, 30, 50, 0.55) 0%,
                     rgba(20, 30, 50, 0.35) 50%,
                     rgba(20, 30, 50, 0.75) 100%);
  --photo-scrim:   linear-gradient(to top,
                     rgba(0, 0, 0, 0.72) 0%,
                     rgba(0, 0, 0, 0.18) 55%,
                     transparent 100%);
}

/* ═══════════════════════════════════════════
   BASE ELEMENTS — semantic CSS
   ═══════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Otsikot — aina Playfair Display, normaali paino (400), tiivis lh. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--fg);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-h1); margin-bottom: 22px; }
h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
h4 { font-size: 15px; font-weight: 500; margin-bottom: 6px; }

p  { color: var(--fg-muted); line-height: var(--lh-loose); }

a  { color: inherit; text-decoration: none; transition: color var(--t-fast), opacity var(--t-fast); }

/* Eyebrow — pienet, harvakseltaan spacetut välilehdet isojen otsikoiden yllä.
   Käytetään jatkuvasti: "Toiminta-alueet", "Palvelut", "Tiimi" jne. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  font-weight: 500;
  margin-bottom: 14px;
}
.eyebrow--on-dark { color: var(--arctic); }

/* Lead — hero-kappale, 17px, rauhallinen pituus */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 540px;
}

/* Sitaatti — serif kursiivi, midnight */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.7;
  color: var(--midnight);
  max-width: 680px;
}

/* Hairline-divider — ohut viiva, keskeinen visuaalinen motiivi */
.hairline {
  width: 24px;
  height: 1px;
  background: var(--arctic);
  border: 0;
  margin: 0 0 18px 0;
}

/* Forms — kaikki inputit yhdenmukaisia, 2px radius, mist-border */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}
.field {
  width: 100%;
  padding: 13px 16px;
  border: var(--border-hair);
  background: var(--bg-raised);
  color: var(--fg);
  border-radius: var(--r-1);
  outline: none;
  transition: border-color var(--t-fast);
}
.field:focus { border-color: var(--line-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}