/* ============================================================
   EVERMONT × TIFFANY & CO. — tokens.css
   Designsystem destillert fra research/screenshots/02-tiffany-and-co.png
   (Tiffany & Co., US-forside, Chromium @ 1440×900).

   [målt]  = lest av skjermbildet i px @ 1440 referansebredde
   [design]= utfylt av meg der kilden ikke ga en verdi

   Informasjonsstruktur følger Cullen/cullen-hjemmeside-analyse.md,
   IKKE Tiffany. Tiffany gir *språket*, Cullen gir *rekkefølgen*.

   Vil du bytte til de ekte fontene: endre kun --tf-font-display
   og --tf-font-sans. Ingenting annet skal trenge endring.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Poppins:wght@200;300;400;500&display=swap');

:root {
  /* ---------- 1. MERKEVAREFARGE (byttbar) -------------------
     Tiffany Blue 1837 = #81D8D0. Dette er den ENESTE mettede
     fargen i systemet, og den opptrer kun på fire flater:
     announcement-bar, utility-stripe, chat-boblen og demo-
     switcherens knapp — pluss nyhetsbrevet via --brand-tint.
     Alt annet er hvitt, grått og nesten-svart.
     brand-switch.js overskriver --brand-* på :root.          */
  --brand-primary:     #81D8D0;   /* [målt] announcement-bar   */
  --brand-on-primary:  #121212;   /* tekst PÅ primary — auto   */
  --brand-ink:         #0E8C84;   /* primary mørknet til AA på hvitt */
  --brand-tint:        #E6F7F5;   /* primary 22 % på hvitt     */

  /* ---------- 2. NØYTRALER ----------------------------------
     Tiffany er KALDT nøytral (i motsetning til Cullens varme
     grå). Ikke bland inn gulstikk — det bryter systemet.      */
  --tf-ink:        #121212;   /* [målt] all brødtekst          */
  --tf-ink-soft:   #5C5C5C;   /* [design] sekundærtekst        */
  --tf-ink-faint:  #8E8E8E;   /* [design] metadata, tidsstempel*/
  --tf-paper:      #FFFFFF;   /* [målt] standard seksjonsflate */
  --tf-mist:       #F6F6F6;   /* [design] annenhver lys seksjon*/
  --tf-rule:       #E2E2E2;   /* [design] tynne skillelinjer   */
  --tf-rule-dark:  #333333;   /* [design] linjer på mørk flate */
  --tf-charcoal:   #121212;   /* mørke flater (initiativpanel)  */

  /* ---------- 3. TYPOGRAFI ----------------------------------
     Kilden bruker to lisensierte familier:
       wordmark/overskrift → en didone-aktig serif
       brødtekst/nav       → «Tiffany Sans», geometrisk sans
     Substitutter under er valgt på kontrast og bokstavform.   */
  --tf-font-display: 'Playfair Display', Didot, 'Times New Roman', Georgia, serif;
  --tf-font-sans:    'Poppins', 'Century Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Skala [målt av skjermbildet] */
  --tf-t-wordmark:   44px;  /* [design] kilden 88px på egen rad;
                               her halvert fordi logoen ligger
                               INNE i nav-raden (bestilt slik)  */
  --tf-t-hero:       36px;  /* [målt] «Elsa Peretti® Jewelry» 34 */
  --tf-t-section:    32px;  /* [design] seksjonsoverskrift       */
  --tf-t-display-sm: 24px;  /* [design] akkordeon-overskrift     */
  --tf-t-card:       15px;  /* [design] kortnavn, uppercase      */
  --tf-t-body:       16px;  /* [målt] hero-brødtekst 16/24       */
  --tf-t-small:      14px;  /* [målt] announcement-bar           */
  --tf-t-nav:        12px;  /* [målt] nav-lenker ~12–13          */
  --tf-t-label:      12px;  /* [målt] «SHOP THE COLLECTION»      */
  --tf-t-micro:      11px;  /* [design] footer, metadata         */

  /* Vekter — geometrisk sans i 300 er hele roen i systemet */
  --tf-w-display: 400;   /* serif — aldri tyngre               */
  --tf-w-body:    300;   /* [målt] brødtekst er LETT            */
  --tf-w-label:   400;   /* uppercase labels                    */

  /* Sperring */
  --tf-ls-wordmark: 3px;     /* [målt] wordmark er tydelig sperret */
  --tf-ls-nav:      0.6px;   /* [målt] nav er nesten usperret      */
  --tf-ls-label:    1.4px;   /* [målt] uppercase CTA/labels        */
  --tf-ls-display:  0.2px;   /* serif — nesten ingen               */

  /* ---------- 4. ROM ---------------------------------------- */
  --tf-band-h:       560px;  /* [målt] hero 227→767 = 540, +20 [design] */
  --tf-band-h-sm:    440px;  /* [design] dobbelbanner             */
  --tf-section-y:     88px;  /* [design]                          */
  --tf-section-y-lg: 112px;  /* [design]                          */
  --tf-gap-head:      44px;  /* [design] overskrift → innhold     */
  --tf-gap-cta:       36px;  /* [design] tekst → CTA              */

  /* ---------- 5. GRID -------------------------------------- */
  --tf-container:  1320px;  /* [design] Tiffany kjører nesten full bredde */
  --tf-gutter:       40px;  /* [målt] pin-ikon x=48 → ~40 gutter  */
  --tf-hero-split:    2fr;  /* [målt] bilde 0→960 av 1440 = 2/3   */
  --tf-gap-4up:      24px;  /* [design]                           */
  --tf-gap-3up:      32px;
  --tf-gap-2up:       0px;  /* [målt] dobbelbanner har INGEN gap  */

  /* ---------- 6. KOMPONENTMÅL ------------------------------ */
  --tf-announce-h:  40px;   /* [målt]                          */
  --tf-header-h:   112px;   /* [målt] 40→190 minus nav-rad      */
  --tf-btn-h:       48px;   /* [design]                        */
  --tf-btn-px:      34px;
  --tf-input-h:     48px;
  --tf-chat-h:      70px;   /* [design] 2 linjer + padding.
                               Switcheren forskyves med denne —
                               endrer du chat-teksten, endre her. */

  /* ---------- 7. IKKE-FORHANDLEBART ------------------------ */
  --tf-radius: 0;      /* Hele siden. Ingen unntak utenom prikker. */
  --tf-ease:   220ms cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tf-paper);
  color: var(--tf-ink);
  font-family: var(--tf-font-sans);
  font-size: var(--tf-t-body);
  font-weight: var(--tf-w-body);
  line-height: 1.5;                 /* [målt] 16/24 */
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font-family: inherit; }   /* ellers sniker Arial seg inn */
h1, h2, h3, h4 { margin: 0; font-weight: var(--tf-w-display); }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Skarpe kanter håndheves — unntak: paginering og switcher-flate */
*:not(.tf-dot):not(.tf-switch):not(.tf-switch__fab):not(.tf-switch__sw):not(.tf-chat__bubble) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }

/* ============================================================
   TYPOGRAFI-KLASSER
   ============================================================ */

/* Serif-overskrifter. Aldri tyngre enn 400 — det er didonens
   tynne hårstreker som gjør jobben, ikke vekten. */
.tf-h1, .tf-h2, .tf-h3 {
  font-family: var(--tf-font-display);
  font-weight: var(--tf-w-display);
  letter-spacing: var(--tf-ls-display);
  line-height: 1.18;
}
.tf-h1 { font-size: var(--tf-t-hero); }
.tf-h2 { font-size: var(--tf-t-section); }
.tf-h3 { font-size: var(--tf-t-display-sm); }

/* Eyebrow — liten, sperret, uppercase. På hvitt: brand-ink. */
.tf-eyebrow {
  font-size: var(--tf-t-label);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 18px;
}
.tf-eyebrow--muted { color: var(--tf-ink-soft); }
.tf-eyebrow--light { color: rgba(255,255,255,.72); }

/* Brødtekst — maks ~46 tegn i redaksjonelle spalter */
.tf-body { font-size: var(--tf-t-body); line-height: 1.55; }
.tf-body--narrow { max-width: 46ch; }
.tf-body--muted  { color: var(--tf-ink-soft); }
.tf-body--sm     { font-size: var(--tf-t-small); }

.tf-center { text-align: center; }
.tf-center .tf-body--narrow { margin-inline: auto; }

.tf-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* «Gå til hovedinnhold» var klippet bort også når den fikk fokus, altså
   en snarvei ingen kunne se at de sto på. Fokuserbart .tf-sr-innhold
   må kunne vises. Labels med .tf-sr kan ikke få fokus, så de påvirkes
   ikke. Gjelder alle skjermstørrelser — tastatur finnes overalt. */
.tf-sr:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  width: auto; height: auto;
  margin: 0; padding: 12px 18px;
  clip: auto; clip-path: none; overflow: visible;
  background: var(--tf-ink); color: #fff;
  font-size: var(--tf-t-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
}

/* ============================================================
   CTA-SYSTEMET — tre varianter, ikke flere

   Tiffanys primær-CTA er IKKE en knapp. Den er en understreket
   uppercase tekstlenke med tydelig underline-offset [målt].
   Fylte knapper er reservert for skjema og booking.
   ============================================================ */

/* 1. Primær — understreket tekstlenke. Brukes overalt. */
.tf-link {
  display: inline-block;
  font-size: var(--tf-t-label);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  /* padding-top løfter høyden fra 21 til 25px (WCAG 2.5.8 vil ha 24).
     Avstanden ned til understreken er fortsatt 6px, så det ser likt ut. */
  padding: 4px 0 6px;
  border-bottom: 1px solid currentColor;
  transition: color var(--tf-ease), border-color var(--tf-ease);
}
.tf-link:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
.tf-link--light { color: #fff; }
.tf-link--light:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

/* 2. Sekundær — pil-lenke uten ramme (redaksjonelle seksjoner) */
.tf-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--tf-t-label);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  padding: 4px 0;   /* 18 → 26px høy. Dette er dobbelbannerets CTA. */
}
.tf-arrow span { transition: transform var(--tf-ease); }
.tf-arrow:hover span { transform: translateX(6px); }
/* :not() fordi .tf-link--light-varianten står på mørk flate og går til
   --brand-primary. --brand-ink er mørknet for hvitt papir og ville
   forsvunnet der. */
.tf-arrow:not(.tf-link--light) { transition: color var(--tf-ease); }
.tf-arrow:not(.tf-link--light):hover { color: var(--brand-ink); }

/* 3. Fylt — kun skjema og booking. Aldri som browse-CTA. */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--tf-btn-h); padding: 0 var(--tf-btn-px);
  border: 1px solid var(--tf-ink);
  background: var(--tf-ink); color: #fff;
  font-size: var(--tf-t-label);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--tf-ease), color var(--tf-ease), border-color var(--tf-ease);
}
/* HOVER-FYLL FØLGER PRIMARY — men bare der fyllet er NYTT.

   Kontrollene under går fra gjennomsiktig til fylt på hover, og da er
   --brand-primary alltid en synlig endring. Tekstfargen er
   --brand-on-primary, som JS regner ut på høyest kontrast, så paret er
   lesbart uansett valgt farge (målt: 6,6:1 i verste preset).

   Rammen blir IKKE primary. Den står som ink, ellers ville en lys
   primary (Blush, Tiffany Blue) gitt knappen en kant på ~1,4:1 mot
   hvitt papir og fått den til å se ut som den mistet formen.

   .tf-btn under er unntaket: den er ALLEREDE fylt med ink. Byttet den
   til primary på hover, ville hoveren blitt usynlig når primary ligger
   nær ink — og «Kull» (#121212) er en innebygd preset, identisk med
   --tf-ink. Derfor inverterer den til hvitt i stedet. */
.tf-btn:hover { background: #fff; color: var(--tf-ink); }
.tf-btn--ghost { background: transparent; color: var(--tf-ink); }
.tf-btn--ghost:hover { background: var(--brand-primary); color: var(--brand-on-primary); }
.tf-btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.tf-btn--light:hover {
  background: var(--brand-primary); color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}