/* ============================================================
   MonumentArt — 01 TOKENS
   Sentralt designsystem. Endre farger, typografi og spacing her
   og hele nettstedet følger etter.
   ============================================================ */

:root {
  /* ---------- Farge: base (kald, dyp nordisk natt) ---------- */
  --c-void:        #050607;
  --c-bg:          #07090b;
  --c-bg-2:        #0a0d11;
  --c-bg-3:        #0f1319;
  --c-surface:     #12171e;
  --c-surface-2:   #171d26;
  --c-elev:        #1c232d;

  /* ---------- Farge: tekst ---------- */
  --c-text:        #eef1f4;
  --c-text-2:      #b3bcc6;
  --c-text-3:      #7d8892;
  --c-text-4:      #4f5862;

  /* ---------- Farge: aksent (messing / varmt lys fra render) ---------- */
  --c-accent:      #e0bd88;
  --c-accent-2:    #c99a63;
  --c-accent-deep: #8a6435;
  --c-accent-soft: rgba(224, 189, 136, 0.14);

  /* ---------- Farge: sekundær aksent (nordisk teal) ---------- */
  --c-cool:        #7fb0ab;
  --c-cool-deep:   #33534f;
  --c-moss:        #79866a;

  /* ---------- Linjer og glass ---------- */
  --line:          rgba(255, 255, 255, 0.075);
  --line-2:        rgba(255, 255, 255, 0.135);
  --line-3:        rgba(255, 255, 255, 0.22);
  --glass-bg:      linear-gradient(160deg, rgba(255,255,255,0.062) 0%, rgba(255,255,255,0.018) 60%, rgba(255,255,255,0.032) 100%);
  --glass-bg-flat: rgba(255, 255, 255, 0.045);
  --glass-blur:    blur(26px) saturate(165%);
  --glass-blur-lg: blur(48px) saturate(180%);
  --glass-border:  1px solid rgba(255, 255, 255, 0.095);
  --glass-inner:   inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(0, 0, 0, 0.3);

  /* ---------- Gradienter ---------- */
  --grad-accent:   linear-gradient(115deg, #f0d3a4 0%, #e0bd88 32%, #b6874f 100%);
  --grad-text:     linear-gradient(178deg, #ffffff 0%, #c6ced7 58%, #8b959f 100%);
  --grad-sheen:    linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.22) 48%, transparent 62%);
  --grad-fade-b:   linear-gradient(to bottom, transparent, var(--c-bg));

  /* ---------- Skygger / dybde ---------- */
  --sh-xs:  0 1px 2px rgba(0,0,0,.4);
  --sh-sm:  0 2px 10px -2px rgba(0,0,0,.55);
  --sh-md:  0 12px 34px -12px rgba(0,0,0,.7);
  --sh-lg:  0 34px 68px -28px rgba(0,0,0,.82), 0 8px 20px -12px rgba(0,0,0,.6);
  --sh-xl:  0 60px 120px -40px rgba(0,0,0,.9), 0 16px 40px -20px rgba(0,0,0,.7);
  --sh-glow-accent: 0 0 0 1px rgba(224,189,136,.28), 0 18px 50px -18px rgba(224,189,136,.34);
  --sh-ring: 0 0 0 1px var(--line-2);

  /* ---------- Typografi ---------- */
  --f-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(3.4rem, 13.5vw, 12.5rem);
  --fs-h1:      clamp(2.6rem, 7.2vw, 6rem);
  --fs-h2:      clamp(2.1rem, 5.4vw, 4.5rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.35rem);
  --fs-h4:      clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-lead:    clamp(1.05rem, 1.55vw, 1.32rem);
  --fs-body:    clamp(0.965rem, 1.02vw, 1.06rem);
  --fs-sm:      clamp(0.86rem, 0.9vw, 0.925rem);
  --fs-xs:      0.78rem;
  --fs-label:   0.705rem;

  --ls-display: -0.052em;
  --ls-head:    -0.036em;
  --ls-body:    -0.008em;
  --ls-label:   0.24em;

  --lh-display: 0.855;
  /* 0.98 var for stramt. Inter Tight har underlengder på 0.24em og
     overlengder på 0.75em — til sammen 0.99em mellom to grunnlinjer.
     Med 0.98 møttes altså g/j/p/y på én linje og b/d/k/l på neste,
     og bokstavene så avkuttet ut. 1.05 gir dem luft uten å løse opp
     den stramme redaksjonelle rytmen. */
  --lh-head:    1.05;
  --lh-body:    1.68;

  /* ---------- Rom / rytme ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 11rem;   --sp-12: 15rem;

  --section-y:   clamp(6rem, 12vh, 11rem);
  /* Én avstand mellom blokker inne i en seksjon — brukes både under
     seksjonshodet og mellom alle blokker under det, slik at hele
     nettstedet har samme vertikale rytme. Endre her, ikke i markupen. */
  --block-gap:   clamp(3rem, 6vw, 5.5rem);
  --gutter:      clamp(1.15rem, 4.2vw, 4.5rem);
  --max-w:       1560px;
  --max-w-text:  68ch;
  --max-w-narrow: 46rem;

  /* ---------- Radius ---------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 22px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px;

  /* ---------- Motion ---------- */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --e-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   0.24s;
  --t-base:   0.45s;
  --t-slow:   0.8s;
  --t-xslow:  1.4s;

  /* ---------- Lag ---------- */
  --z-canvas:  0;
  --z-content: 10;
  --z-nav:     500;
  --z-overlay: 800;
  --z-modal:   900;
  --z-cursor:  1000;
  --z-loader:  1100;

  /* ---------- Diverse ---------- */
  --nav-h: 76px;
  --grain-opacity: 0.038;
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
}

/* Lyst tema er bevisst ikke støttet — dette er et mørkt premium-nettsted.
   color-scheme låses slik at nettleseren ikke overstyrer skjemafelt. */
:root { color-scheme: dark; }