/* ==========================================================================
   base.css
   Grunden för hela portfolion: nollställning, designvariabler (tokens),
   typografi, animationer och några återkommande hjälpklasser.

   Alla färger kommer från den godkända designen och skrivs i OKLCH.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Designvariabler (CSS custom properties)
   Definieras på :root så att alla andra filer kan återanvända dem.
   -------------------------------------------------------------------------- */
:root {
  /* Bakgrunder */
  --background: oklch(0.15 0.02 258);
  --background-deep: oklch(0.1 0.02 258);
  --background-panel: oklch(0.17 0.02 258 / 0.7);

  /* Text */
  --text-primary: oklch(0.96 0.014 75);
  --text-secondary: oklch(0.76 0.025 235);
  --text-muted: oklch(0.6 0.02 235);
  --text-faint: oklch(0.48 0.014 258);

  /* Accentfärg. Startsidan använder den gröna signalfärgen.
     Varje projektsida skriver över --accent och --accent-2 med sin egen färg
     (se projects.css), så att alla komponenter följer med automatiskt. */
  --accent: oklch(0.78 0.19 152);
  --accent-2: oklch(0.72 0.06 235);

  /* Genomskinliga varianter av accentfärgerna.
     color-mix blandar accentfärgen med "transparent" — 35 % färg betyder
     35 % opacitet. De definieras bara en gång här, men eftersom de refererar
     till var(--accent) räknas de om automatiskt på varje projektsida. */
  --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-2-12: color-mix(in srgb, var(--accent-2) 12%, transparent);
  --accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-22: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-25: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-28: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-35: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-2-28: color-mix(in srgb, var(--accent-2) 28%, transparent);
  --accent-2-35: color-mix(in srgb, var(--accent-2) 35%, transparent);
  --accent-2-40: color-mix(in srgb, var(--accent-2) 40%, transparent);
  --accent-2-50: color-mix(in srgb, var(--accent-2) 50%, transparent);

  /* Hero-accenterna hålls separata eftersom projekthjältarna är låsta i
     designen och ska använda exakt de godkända färgvärdena. */
  --hero-accent: var(--accent);
  --hero-accent-2: var(--accent-2);
  --hero-accent-25: color-mix(in srgb, var(--hero-accent) 25%, transparent);
  --hero-accent-08: color-mix(in srgb, var(--hero-accent) 8%, transparent);
  --hero-accent-2-28: color-mix(in srgb, var(--hero-accent-2) 28%, transparent);
  --hero-accent-2-35: color-mix(in srgb, var(--hero-accent-2) 35%, transparent);

  /* Mörk bakgrundston i bildramarna. Skrivs över per projekt. */
  --accent-frame: oklch(0.2 0.03 220 / 0.4);

  /* Linjer och ramar */
  --border: oklch(0.4 0.02 258 / 0.4);
  --border-strong: oklch(0.4 0.02 258 / 0.55);
  --border-soft: oklch(0.3 0.02 258 / 0.4);

  /* Glow-effekter */
  --glow: oklch(0.72 0.2 152 / 0.16);
  --glow-cyan: oklch(0.75 0.15 195 / 0.09);
  --shadow-card: 0 20px 55px -18px oklch(0.04 0.02 258 / 0.65);
  --shadow-deep: 0 45px 100px -25px oklch(0.02 0.02 258 / 0.8);

  /* Typsnitt */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Mått som återkommer */
  --header-height: 70px;
  --page-padding: clamp(24px, 6vw, 88px);
}

/* --------------------------------------------------------------------------
   2. Nollställning
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  scroll-behavior: smooth;
}

/* Ingen overflow-x här med flit. Sektionerna klipper själva sitt innehåll
   (se projects.css och components.css). Sätter man overflow-x på body blir
   body en egen scrollbehållare, och då slutar hopp till ankare som
   #projects att fungera tillförlitligt. */
body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
}

img,
video {
  max-width: 100%;
}

/* Allt med attributet hidden ska döljas — även element som annars är
   flex eller grid. Språkväxlaren använder detta för att visa ett språk
   i taget (se language.js). */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Typografi
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: oklch(0.86 0.19 152);
}

/* Liten versal etikett ovanför rubriker — används på hela sajten. */
.kicker {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Fokusmarkering (tillgänglighet)
   Syns bara vid tangentbordsnavigering, inte vid musklick.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Länk som hoppar direkt till innehållet. Syns först när den får fokus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--background-deep);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  font-size: 14px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* Text som bara läses upp av skärmläsare. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Animationer
   -------------------------------------------------------------------------- */
@keyframes scrollDot {
  0%   { transform: translateY(0);    opacity: 1;  }
  50%  { transform: translateY(14px); opacity: 0.3; }
  100% { transform: translateY(0);    opacity: 1;  }
}

@keyframes driftGlow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

@keyframes floatCard {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

@keyframes glowBreathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbitSpinRev {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* --------------------------------------------------------------------------
   6. Reducerad rörelse
   Respekterar användarens systeminställning "minska rörelse".
   Hero-videon pausas dessutom av JavaScript (se main.js).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. Dekorativa bakgrundslager
   Mjuka ljuscirklar som ligger bakom innehållet. De är rent visuella och
   ska aldrig fånga musklick, därför pointer-events: none.
   -------------------------------------------------------------------------- */
.glow-orb,
.backdrop-layer {
  position: absolute;
  pointer-events: none;
}

.glow-orb {
  border-radius: 50%;
}

.backdrop-layer {
  inset: 0;
}