/* LainaLaite — design tokens
   Lähde: "LainaLaite Site.dc.html", suunta 1a (vaalea).
   Käyttö: import "./tokens.css" ensimmäisenä globaalissa CSS:ssä. */

:root {
  /* --- Brand & ink --- */
  --ll-ink:            #1F4B4A;  /* leipäteksti, ylänauha, alatunniste */
  --ll-ink-80:         rgba(31,75,74,.80);
  --ll-ink-70:         rgba(31,75,74,.70);
  --ll-ink-60:         rgba(31,75,74,.60);
  --ll-ink-45:         rgba(31,75,74,.45); /* placeholder-teksti */
  --ll-teal:           #21867A;  /* linkit, WhatsApp, onnistuminen */
  --ll-teal-soft:      rgba(33,134,122,.12);
  --ll-cta:            #D9614A;  /* AINOA pää-CTA-väri + virheet */
  --ll-gold:           #E3B655;  /* saatavuusmerkki, admin-korostus */
  --ll-gold-soft:      rgba(227,182,85,.18);
  --ll-apricot:        #EF8F5B;  /* otsikkokorostus tummalla pohjalla */

  /* --- Surfaces --- */
  --ll-bg:             #FBF8F3;  /* sivun pohja */
  --ll-surface:        #FFFFFF;  /* kortti, kenttä */
  --ll-surface-sunk:   #EFEAE2;  /* upotettu lohko, yhteenveto */
  --ll-surface-admin:  #F6F2EC;  /* adminin oikea sarake */
  --ll-border:         rgba(31,75,74,.13);
  --ll-border-strong:  rgba(31,75,74,.20);
  --ll-hairline:       rgba(31,75,74,.09);

  /* --- Typography --- */
  --ll-font-display: 'Bricolage Grotesque', Georgia, serif;
  --ll-font-ui:      'Instrument Sans', system-ui, -apple-system, sans-serif;
  --ll-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ll-h1:        clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem); /* 28 → 42 */
  --ll-h1-hero:   clamp(1.875rem, 1.1rem + 3.4vw, 3.25rem); /* 30 → 52 */
  --ll-h2:        clamp(1.3125rem, 1.1rem + .8vw, 1.625rem);
  --ll-h3:        1.0625rem;
  --ll-body:      .9375rem;   /* 15 — työpöytä */
  --ll-body-m:    .875rem;    /* 14 — mobiili */
  --ll-small:     .78125rem;  /* 12.5 */
  --ll-label:     .6875rem;   /* 11 — mono-kenttäotsikot */
  --ll-price:     1.1875rem;  /* 19 — display-fontilla */

  --ll-lh-tight:  1.12;
  --ll-lh-body:   1.6;
  --ll-ls-display: -.025em;
  --ll-ls-label:   .06em;

  /* --- Space (4px-ruudukko) --- */
  --ll-1: 4px;  --ll-2: 8px;  --ll-3: 12px; --ll-4: 16px;
  --ll-5: 20px; --ll-6: 24px; --ll-8: 32px; --ll-10: 40px; --ll-12: 48px;
  --ll-gutter-m: 20px;   /* mobiilin sivumarginaali */
  --ll-gutter-d: 40px;   /* työpöydän sivumarginaali */
  --ll-maxw:     1180px; /* sisällön maksimileveys */
  --ll-maxw-read: 680px; /* artikkelipalsta */

  /* --- Radius --- */
  --ll-r-card:  18px;
  --ll-r-panel: 20px;
  --ll-r-field: 14px;
  --ll-r-btn:   14px;
  --ll-r-chip:  20px;
  --ll-r-badge: 6px;

  /* --- Elevation --- */
  --ll-shadow-card:  0 4px 14px rgba(31,75,74,.08);
  --ll-shadow-panel: 0 6px 20px rgba(31,75,74,.10);

  /* --- Motion --- */
  --ll-dur: 160ms;
  --ll-ease: cubic-bezier(.2,.6,.2,1);

  /* --- Min hit target --- */
  --ll-tap: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ll-dur: 0ms; }
}