/*
 * Goji visuell identitet, juni 2026 (Thunet). Tokens og ellipse-utilities.
 * Profilfarger har eget kildebelegg. Hvit lys sidebakgrunn på web/UI er eierbesluttet (B1).
 * Beige er profilens oppgitte #F7E6D9 etter B6. Mørkt tema er palett A, nesten sort plomme,
 * som felles retning for Goji-nettstedene etter B8; de eksakte verdiene og systemstyringen
 * er implementasjonsvalg, ikke profilfakta. Se references/kilder.md og regelstatus.md.
 * Tidligere #f6f2ec og #f2f2f2 er ikke standard sidebakgrunn.
 * Dette er starteren, ikke bevis for produksjonsstatus. Verifiser kontrast i faktisk bruk.
 *
 * Bruk: tilpass midlertidige farge- og temavalg til prosjektets avtalte retning før integrasjon.
 * Kan integreres i globals.css (Tailwind v4: eksponer som --color-* via @theme inline),
 * eller inline i en HTML-fil. Lys er standard; mørk følger prefers-color-scheme.
 * Profilskrifter: Merriweather + Manrope. Rollefordeling er midlertidig føring, ikke absolutt PDF-krav.
 */

:root {
  color-scheme: light;
  --radius: 0.875rem;

  /* Identitetselementet "Flipp -45°": +45deg i CSS = med klokken, lang akse som "/".
     Én proporsjon (PDF s. 8 / Figma "Ellipse 22", 82×148 = 0.554 b:h).
     Bruk bredde med aspect-ratio, eller sett begge mål i samme forhold. */
  --ellipse-tilt: 45deg;
  --ellipse-ar: 0.554;

  /* Originalpalett med felles profilbeige og avledede implementasjonsvarianter.
     *-soft, *-deep og *-bright er ikke nye merkevarefakta eller eksakte 20 %-blandinger. */
  --plum: #432d3a;
  --plum-deep: #2e1f28;
  --plum-soft: #5c4150;
  --terracotta: #bc401e;
  --terracotta-bright: #e08a63; /* AA-lesbar rust til etiketter på mørk plomme */
  --accent-text: #ae381a;       /* liten terrakottatekst: 6,21:1 på hvitt og 5,11:1 på profilbeige; ren terrakotta måler 4,44:1 på beige (Studios-runden, B8) */
  --blue: #6b85c0;
  --blue-soft: #93a6d3;
  --blue-deep: #5a73b3;         /* stor blå tekst på hvitt (4,63:1) og profilbeige (3,81:1); ikke til liten tekst */
  --forest: #32432e;
  --gold: #998259;
  --cream: #f7e6d9;             /* profilens oppgitte hex; felles beige etter B6 */
  --ink: #071323;

  /* Hvit sidebakgrunn er felles standard; øvrige flater er avledet. */
  --background: #ffffff;
  --foreground: #241a22;
  --surface-low: #f7f7f7;
  --surface-high: #e6e6e6;
  --surface-lowest: #ffffff;
  --surface-raised: #ffffff;

  /* Semantikk */
  --primary: #432d3a;
  --primary-foreground: #f7e6d9;
  --primary-deep: #241a22;
  --primary-muted: #6b5560;
  --primary-container: #5c4150;
  --secondary: #f7e6d9;
  --secondary-foreground: #241a22;
  --tertiary: #bc401e;
  --tertiary-foreground: #ffffff;
  --card: #ffffff;
  --card-foreground: #241a22;
  --popover: #ffffff;
  --popover-foreground: #241a22;
  --muted: #ebebeb;
  --muted-foreground: #626262;
  --accent: #f7e6d9;
  --accent-foreground: #241a22;
  --destructive: #bc401e;
  --destructive-foreground: #ffffff; /* tekst på fylt destruktiv handling */
  --border: #d9d9d9;
  --input: #808080; /* tydelig feltgrense også på starterens grå funksjonsflater */
  --ring: #bc401e;

  /* Diagramserier, i denne rekkefølgen */
  --chart-1: #432d3a;
  --chart-2: #bc401e;
  --chart-3: #6b85c0;
  --chart-4: #32432e;
  --chart-5: #998259;

  /* Skrifter */
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Midlertidig mørkmodus-eksempel: kjølig koksgrå, med plomme i avgrensede paneler. Ikke eierbekreftet. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --plum: #432d3a;
    --plum-deep: #271a24;
    --plum-soft: #5c4150;
    --terracotta: #d96a4a;
    --terracotta-bright: #e8956f;
    --accent-text: #e8956f;       /* liten aksent-/feiltekst i mørkt tema */
    --blue: #8ba0d4;
    --blue-soft: #6b85c0;
    --blue-deep: #8ba0d4;
    --forest: #a5bb99;
    --gold: #c2aa78;
    --cream: #f7e6d9;
    --ink: #071323;

    /* Palett A (gojistudios.no fra 21. september 2026, felles retning B8):
       nesten sort plomme i tre nivåer. Verdiene er implementasjonsvalg. */
    --background: #1c131a;
    --foreground: #f7e6d9;
    --surface-low: #271a24;
    --surface-high: #35232e;
    --surface-lowest: #271a24;
    --surface-raised: #35232e;

    --primary: #6b5560;
    --primary-foreground: #f7e6d9;
    --primary-deep: #f7e6d9;
    --primary-muted: #8a727e;
    --primary-container: #5c4150;
    --secondary: #271a24;
    --secondary-foreground: #f7e6d9;
    --tertiary: #d96a4a;
    --tertiary-foreground: #1c131a;
    --card: #271a24;
    --card-foreground: #f7e6d9;
    --popover: #35232e;
    --popover-foreground: #f7e6d9;
    --muted: #271a24;
    --muted-foreground: #c6b6bf;
    --accent: #35232e;
    --accent-foreground: #f7e6d9;
    --destructive: #e8956f; /* liten feiltekst; fylt destruktiv handling bruker --tertiary */
    --destructive-foreground: #1c131a; /* hvit tekst på #d96a4a gir bare 3,44:1 */
    --border: #533c4b;
    --input: #9a8492; /* feltgrense mot rolig flate 4,83:1; mål særskilt på plommepaneler */
    --ring: #e8956f; /* tilpass fokus/offset til faktisk naboflate; se references/mork-modus.md */

    --chart-1: #93a6d3;
    --chart-2: #d96a4a;
    --chart-3: #f7e6d9;
    --chart-4: #a5bb99;
    --chart-5: #c2aa78;
  }
}

/* Ved klassemodell: erstatt media query med :root.dark { ... }, inkludert color-scheme.
   Sett klassen før første tegning og synkroniser ved systemendring. Ikke bland to temaautoriteter.
   :root.dark har høyere spesifisitet enn :root, også for native felters color-scheme. */

/* Normal grunnstørrelse (16 px ved standard nettleserinnstilling); bevar brukerens
   skriftvalg og zoom. Ikke fluid-skaler hele grensesnittet etter skjermbredden. */
html {
  font-size: 100%;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}
h1, h2, h3, .display {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tre etablerte ellipse-utilities. La CSS-høyden følge proporsjonen.
   Portrett med to overlappende ellipser er eksplisitt tillatt (B4); øvrig plassering er arbeidsvalg. */
.ellipse-frame {
  aspect-ratio: var(--ellipse-ar);
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(var(--ellipse-tilt));
}
.ellipse-frame > * {
  transform: rotate(calc(-1 * var(--ellipse-tilt))) scale(var(--ellipse-frame-zoom, 1.5));
}
.ellipse-surface {
  aspect-ratio: var(--ellipse-ar);
  border-radius: 50%;
  transform: rotate(var(--ellipse-tilt));
}
.ellipse-outline {
  aspect-ratio: var(--ellipse-ar);
  border-radius: 50%;
  transform: rotate(var(--ellipse-tilt));
  border: 1.5px solid currentColor;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}