/* ===================================================================
   Nordic Screen / Q-Play — Design tokens
   Brand identity: PDF "Brand Identity (4).pdf"
   Brand typography: Urbanist (variable + static cuts)
   =================================================================== */

@font-face {
  font-family: "Urbanist";
  src: url("fonts/Urbanist-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Urbanist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand palette */
  --nordic-forrest: #2A5932;
  --nordic-mist:    #F8FCE7;
  --nordic-black:   #1A1A1A;
  --nordic-lime:    #DEFE78;
  --nordic-white:   #FCFDF8;

  /* Derived */
  --forrest-12:  rgba(42, 89, 50, 0.12);
  --forrest-20:  rgba(42, 89, 50, 0.20);
  --forrest-40:  rgba(42, 89, 50, 0.40);
  --forrest-65:  rgba(42, 89, 50, 0.65);
  --forrest-85:  rgba(42, 89, 50, 0.85);

  /* E-paper paper tone (slightly warmer than mist for posters) */
  --paper:       #F4F1E8;
  --paper-edge:  #E5E0D0;
  --paper-shadow: rgba(60, 50, 30, 0.08);

  /* Type */
  --font-display: "Urbanist", system-ui, sans-serif;
  --font-body:    "Urbanist", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }

body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  color: var(--nordic-black);
  background: #ECE8D9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============== A4 page shell ============== */
.page {
  width: 210mm;
  min-height: 297mm;
  margin: 24px auto;
  background: var(--nordic-mist);
  color: var(--nordic-forrest);
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 30px 60px -20px rgba(40, 60, 30, 0.25),
    0 8px 20px -8px rgba(40, 60, 30, 0.15);
}

@media print {
  body { background: white; }
  .page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
  }
  .tweaks-host { display: none !important; }
}

/* Type defaults */
.page h1, .page h2, .page h3, .page h4, .page p, .page ul, .page ol, .page li {
  margin: 0;
  padding: 0;
  font-weight: inherit;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--forrest-65);
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
}

/* ============== utility: paper texture ============== */
.paper-texture {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120, 100, 60, 0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(80, 90, 50, 0.04) 0, transparent 40%),
    repeating-linear-gradient(
      0deg,
      rgba(60, 50, 30, 0.012) 0 1px,
      transparent 1px 3px
    );
}

/* Subtle e-ink dither effect */
.eink-dither {
  position: relative;
}
.eink-dither::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ============== logo lockup ============== */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--nordic-forrest);
}
.lockup-mark {
  width: 14px;
  height: 14px;
  background: currentColor;
  border-radius: 2px;
}