/* ============================================================================
   PlotClip — design tokens (single source of truth)
   Extracted from the Claude Design package ("PlotClip Design Package").
   Loaded AFTER each page's inline <style>, so the legacy-variable remap and the
   accent-foreground fixes below win by source order.

   Structure: core tokens (:root) → legacy aliases (so existing CSS adopts the
   new look with no markup changes) → genre token layer → base typography →
   accent-foreground contrast fixes. Add a new genre = add a .genre-* block.
   ============================================================================ */

/* Itse-hostatut fontit (VIL-106 P2). Ennen: @import Google Fontsista — kaksi ongelmaa:
   (1) yksityisyys: Google-CDN sai jokaisen kävijän IP:n, ja me EMME näytä evästebanneria
   (saksalainen oikeuskäytäntö on katsonut tämän GDPR-rikkomukseksi ilman suostumusta);
   (2) nopeus: @import CSS:n sisällä on sarjallinen (selain löytää fonttipyynnön vasta
   ladattuaan tokens.css:n) → ei rinnakkaisuutta. Nyt fontit tulevat samasta originista.
   Kaikki kolme ovat VARIABLE-fontteja → yksi woff2 per perhe kattaa koko painoalueen
   (font-weight: min max). Vain latin-osajoukko (sivu on englanniksi). font-display:swap
   → teksti näkyy heti järjestelmäfontilla eikä jää näkymättömäksi fontin latautuessa. */
@font-face { font-family:'Space Grotesk';  font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/static/fonts/spacegrotesk.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/static/fonts/hankengrotesk.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/static/fonts/jetbrainsmono.woff2') format('woff2'); }

:root {
  /* --- SURFACES (elevation rises with lightness) --- */
  --bg:        #0B0C0F;   /* canvas */
  --sunken:    #131418;
  --s1:        #16181D;   /* surface 1 (cards) */
  --s2:        #1C1F26;   /* surface 2 (inputs, raised) */
  --s3:        #24272F;   /* surface 3 */
  --border:    #24272F;

  /* --- TEXT --- */
  --txt-high:  #F4F5F7;
  --txt-body:  #C7CAD1;
  --txt-muted: #9398A3;
  --txt-dim:   #6A6F7B;

  /* --- SIGNATURE ACCENT (lime) — foreground on accent is ALWAYS --on-accent --- */
  --accent:        #C6FF3A;
  --accent-hover:  #D4FF5C;
  --accent-press:  #B2E82E;
  --accent-tint:   rgba(198,255,58,.14);
  --on-accent:     #0B0C0F;
  /* on-brand gradient partner (existing CSS uses linear-gradient(--accent,--accent-2)) */
  --accent-2:      #9BE634;

  /* --- SEMANTIC (tuned for near-black) --- */
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #FF5C5C;
  --info:    #5B9BFF;

  /* --- TYPE --- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;  /* display + headings */
  --font-body:    'Hanken Grotesk', system-ui, sans-serif; /* body */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;/* data & cost */

  /* --- SPACING (4pt base) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* --- RADIUS --- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* --- MOTION --- */
  --motion-micro: 120ms ease-out;          /* hover */
  --motion-enter: 240ms cubic-bezier(.2,.8,.2,1); /* enter / sheet */
  --motion-reveal: 400ms ease;             /* generation reveal */

  /* --- GENRE TOKEN LAYER (alias, swapped per active genre scope) ---
     App chrome always stays on --accent (lime). A per-genre accent + mood is
     injected only where a .genre-* class is applied (gallery / preview / editor). */
  --genre-accent:   var(--accent);
  --genre-accent-2: var(--accent-2);
  --genre-bg:       var(--bg);

  /* ===== LEGACY ALIASES — remap the old variable names to the new palette =====
     The existing inline CSS in index.html / dashboard.html uses these; redefining
     them here (loaded later) rebrands the whole UI without touching that markup. */
  --bg:     #0B0C0F;       /* (already set above; kept for clarity) */
  --panel:  #16181D;       /* was #15151d  -> surface 1 */
  --line:   #24272F;       /* was #26263340 -> border */
  --txt:    #F4F5F7;       /* was #e9e9f0  -> high text */
  --mut:    #9398A3;       /* was #8a8a99  -> muted */
  --accent2:#9BE634;       /* was #7b1fa2 (purple) -> lime gradient partner */
  --good:   #4ADE80;       /* was #4caf50  -> success */
}

/* --- GENRE SCOPES (set up for the future; apply to a gallery/preview/editor root) --- */
.genre-horror    { --genre-accent:#FF3B47; --genre-accent-2:#7CFF6B; --genre-bg:#0A0708; }
.genre-crime     { --genre-accent:#5B9BFF; --genre-accent-2:#FFC23C; --genre-bg:#070A0F; }
.genre-education  { --genre-accent:#2DD4BF; --genre-accent-2:#FF924C; --genre-bg:#080B0E; }
/* Motivation peri oletuksena --accent (lime) → projektipiste kilpaili brändiaksentin kanssa
   samassa näkymässä. Amber erottaa genren brändistä (F30). */
.genre-motivation { --genre-accent:#FFB84D; --genre-accent-2:#FF924C; --genre-bg:#0B0906; }

/* ============================================================================
   BASE TYPOGRAPHY — applied globally (overrides the inline `font:` shorthand)
   ============================================================================ */
body { font-family: var(--font-body); }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing:-.01em; }
/* Linkit brändätysti: poistaa selaimen sinisen/violetin (visited) tyylittelemättömiltä <a>:ilta
   (esim. adminin "Recent videos" oli ainoa tyylittelemätön linkki koko tuotteessa). Matala
   spesifisyys (0,0,1) → luokalliset linkit (.pc-link, .login, navit ym.) ylikirjoittavat omalla
   värillään; nämä perivät ympäröivän tekstivärin. Author-sääntö voittaa selaimen :visited-violetin. */
a { color: inherit; }

/* neutralise the old horror-red body glow → premium neutral elevation glow.
   background-color = KOVA fallback: jos gradientti/muuttuja ei jostain syystä resolvoidu
   (raportoitu kertaalleen valkoinen tausta generoinnin aikana), sivu pysyy silti tummana. */
body { background-color: #0B0C0F;
       background-image: radial-gradient(1000px 560px at 50% -12%, #14161B 0%, var(--bg, #0B0C0F) 62%);
       background-attachment: fixed; }

/* ============================================================================
   ACCENT-FOREGROUND CONTRAST FIX
   The old accent was blood-red (light text on it). The new accent is lime, which
   REQUIRES dark text. These are the only elements that sit ON the accent.
   Scoped precisely so non-accent buttons/tabs (which keep their own colour) are
   untouched. Loaded after the inline <style>, so equal-specificity rules win.
   ============================================================================ */
#go, #pubOpen, #pubGo2, .pubmini, .bpub,
.pubmode.sel, .modetab.sel, .cmtab.sel {
  color: var(--on-accent);
}

/* ---------------------------------------------------------------------------
   [hidden] voittaa layout-displayn.
   HTML:n `hidden`-attribuutti asettaa display:none vain selaimen OLETUStyylissä,
   jonka mikä tahansa author-sääntö (esim. `.nlinks { display:flex }`) ohittaa →
   piilotetuksi merkitty elementti jäi näkyviin (mm. mktnav.js:n navinvaihto).
   Tämä sääntö tekee attribuutista luotettavan kaikilla sivuilla.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   iOS Safari auto-zoom -esto (koko sovellus).
   Alle 16px input/textarea/select saa iOS Safarin ZOOMAAMAAN siihen fokusoitaessa
   → "zoom hyppii" (Ville: admin New message Cancel/Send, videon otsikon editointi).
   Aiemmin korjattu vain julkisiin lomakkeisiin per sivu; tämä kattaa KAIKKI sisäiset
   lomakkeet kerralla. Kohdistus (hover:none)+(pointer:coarse) osuu vain touch-laitteisiin
   (iPhone/iPad/Android) → desktop säilyttää tiheämmät 13–14px-inputit. !important koska
   monella inputilla on inline font-size joka muuten voittaisi.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select { font-size: 16px !important; }
}