/* Namsosfesten 2027 – design tokens
   Fonter: Soap (Adobe Fonts, kit pdz4wam, kun vekt 400) + Figtree (lokal, se fonts/). */

/* Figtree ligger på egen server (fonts/, SIL Open Font License), så besøkende ikke sendes til Google.
   Variabel font, vekt 400–900. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* Merkefarger (kilde: Foreløpige_farger.ai) */
  --nf-gul: #FFCF03;       /* NB: etikett i AI sier «PANTONE 171 C / 249 70 28» – feil, fargefeltet er gult */
  --nf-oransje: #FF5C3E;   /* PANTONE 171 C */
  --nf-fiolett: #E16EF0;   /* PANTONE 245 C */
  --nf-lilla: #5F4EDD;     /* PANTONE 2725 C */
  --nf-turkis: #00C6D7;    /* PANTONE 3115 C */
  --nf-rosa: #F6A3BB;      /* PANTONE 189 C */
  --nf-krem: #FFE6D2;
  --nf-rosekrem: #FFE6E1;  /* alternativ krem */
  --nf-natt: #18001D;

  /* Typografi
     Soap: alle overskrifter og artistnavn (samme font som logoen). Kun vekt 400.
     Figtree: ingress, brødtekst, labels, knapper, meny og tall. */
  --font-soap: "soap", "Figtree", system-ui, sans-serif;
  --font-heading: var(--font-soap);
  --font-body: "Figtree", system-ui, sans-serif;

  --fs-artist-xl: clamp(3.25rem, 1.2rem + 9vw, 9rem);
  --fs-artist-l: clamp(2.25rem, 1.2rem + 4.6vw, 5rem);
  --fs-artist-m: clamp(1.6rem, 1.1rem + 2.2vw, 2.75rem);
  /* Soap er bred, så overskriftene er satt mindre enn en vanlig grotesk */
  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-lead: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  --lh-tight: 0.95;
  --lh-heading: 1.0;
  --lh-body: 1.55;
  --tracking-label: 0.08em;

  /* Avstand (4px-basert) */
  --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: 9rem;

  /* Form */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --stroke: 2.5px;

  /* Hard skygge – samme grep som 3D-skyggen i logoen */
  --shadow-s: 3px 3px 0 var(--nf-natt);
  --shadow-m: 6px 6px 0 var(--nf-natt);
  --shadow-l: 10px 10px 0 var(--nf-natt);

  /* 3D-uttrekk for Soap-tekst, skalerer med font-size (som i logoen) */
  --soap-extrude:
    0.01em 0.01em 0 var(--nf-natt), 0.02em 0.02em 0 var(--nf-natt),
    0.03em 0.03em 0 var(--nf-natt), 0.04em 0.04em 0 var(--nf-natt),
    0.05em 0.05em 0 var(--nf-natt), 0.06em 0.06em 0 var(--nf-natt),
    0.07em 0.07em 0 var(--nf-natt), 0.08em 0.08em 0 var(--nf-natt);

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* sterk ease-out for inngang og løft */
  --dur: 180ms;

  --maxw: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* Fargepalett 1 – varm/fiolett */
[data-palett="1"] {
  --bg: var(--nf-krem);
  --ink: var(--nf-natt);
  --accent-1: var(--nf-oransje);
  --accent-2: var(--nf-fiolett);
  --accent-3: var(--nf-gul);
  --accent-4: var(--nf-lilla);
  --on-accent-4: var(--nf-krem);
}

/* Fargepalett 2 – oransje/turkis/rosa */
[data-palett="2"] {
  --bg: var(--nf-krem);
  --ink: var(--nf-natt);
  --accent-1: var(--nf-oransje);
  --accent-2: var(--nf-turkis);
  --accent-3: var(--nf-rosa);
  --accent-4: var(--nf-natt);
  --on-accent-4: var(--nf-krem);
}