/* Frank Design System 2026: jaettu pohja kaikille Frankin omille deckeille.
   Sama järjestelmä kuin wearefrank.fi: valkoinen pohja, Archivo-otsikot,
   JetBrains Mono -leipäteksti, keltainen aksentti, terävät kulmat, mosaiikkigradientti.
   Käyttö: <link rel="stylesheet" href="/pitch/_shared/frank-2026.css">
            <script src="/pitch/_shared/frank-2026-mosaic.js" defer></script> (jos mosaiikki) */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Pinnat */
  --f-bg: #FFFFFF;          /* pääpohja */
  --f-bg-alt: #F6F8F1;      /* toissijainen pinta, kortit vaalealla */
  --f-ink: #0E1116;         /* otsikot, tumma osio/slide */
  --f-ink-2: #2A2F38;       /* tumman osion kortit */

  /* Teksti */
  --f-text: #333A45;        /* leipäteksti valkoisella */
  --f-muted: #5B6472;       /* toissijainen teksti, yläotsikot */
  --f-text-on-ink: #EEF0F2; /* teksti tummalla */
  --f-muted-on-ink: #9AA5B6;

  /* Keltainen */
  --f-yellow: #E8F02E;      /* taustat, korostukset (.f-mark), CTA, keltainen teksti VAIN tummalla */
  --f-yellow-text: #C73E00; /* keltaisen tumma pari ohuelle tekstille valkoisella, punaoranssi (5.1:1) */
  --f-yellow-ink: #4A5015;  /* tumma oliivi keltaisen päällä olevaan pieneen tekstiin */

  /* Viivat */
  --f-line: #DDE1E6;
  --f-line-strong: #0E1116;
  --f-line-on-ink: rgba(255, 255, 255, 0.14);

  /* Typografia */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Perus */
.f-root,
body.f-root {
  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-mono);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.f-root ::selection { background: var(--f-yellow); color: var(--f-ink); }

.f-root h1, .f-root h2, .f-root h3, .f-root h4,
.f-display {
  font-family: var(--f-display);
  color: var(--f-ink);
  letter-spacing: -0.03em;
}
.f-root h1 { font-weight: 900; line-height: 0.92; letter-spacing: -0.045em; }
.f-root h2 { font-weight: 800; line-height: 1; }
.f-root h3 { font-weight: 800; line-height: 1.05; }

/* Tumma osio tai slide */
.f-dark {
  background: var(--f-ink);
  color: var(--f-text-on-ink);
}
.f-dark h1, .f-dark h2, .f-dark h3, .f-dark h4 { color: #FFFFFF; }

/* Komponentit */
.f-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f-muted);
}
.f-dark .f-eyebrow { color: var(--f-muted-on-ink); }
.f-eyebrow.f-accent { color: var(--f-yellow-text); }
.f-dark .f-eyebrow.f-accent { color: var(--f-yellow); }

.f-mark {
  background: var(--f-yellow);
  color: var(--f-ink);
  padding: 0 0.08em;
}

.f-logo {
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--f-ink);
}
.f-logo .dot,
.f-dot { color: var(--f-yellow); }
.f-dark .f-logo { color: #FFFFFF; }

.f-card {
  background: var(--f-bg);
  border: 1px solid var(--f-line);
}
.f-card.f-strong { border: 2px solid var(--f-line-strong); }
.f-card.f-yellow { background: var(--f-yellow); border: 2px solid var(--f-line-strong); color: var(--f-ink); }
.f-dark .f-card { background: var(--f-ink-2); border-color: var(--f-line-on-ink); }

.f-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 22px;
  border: 2px solid var(--f-ink);
  background: var(--f-ink);
  color: #FFFFFF;
  text-decoration: none;
}
.f-btn.f-yellow { background: var(--f-yellow); color: var(--f-ink); }
.f-btn.f-ghost { background: transparent; color: var(--f-ink); }
.f-dark .f-btn.f-ghost { color: #FFFFFF; border-color: #FFFFFF; }

.f-num { color: var(--f-muted); font-family: var(--f-mono); font-size: 13px; }

/* Mosaiikkigradientti taustaksi: <div class="f-mosaic"><canvas data-f-mosaic></canvas></div>
   Isäntäelementillä oltava position: relative. Sisältö z-index > 0. */
.f-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.f-mosaic canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Vanhat agenttiverkko-canvasit (vanhan ilmeen koriste) piilotetaan kaikista deckeistä.
   Mosaiikki on ainoa grafiikka. Elementtejä ei poisteta, koska osa deckeistä hakee
   tekstit tietokannasta DOM-polun lapsi-indekseillä. */
#pilot-canvas,
#cta-canvas,
#net-canvas,
#network-canvas {
  display: none !important;
}