/*
  Kystlys-tokens, portert fra design systemet "Kystlys" (Christers eget
  delte design-system-artefakt) til CSS custom properties. Verdiene her
  er hentet direkte fra tokens.json i systemet — ikke tilnærmet.
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&family=Spectral:wght@200;300&family=Instrument+Sans:wght@400;500&display=swap');

:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-serif-display: 'Spectral', Georgia, serif;
  --font-humanist-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Farger — lyst tema (default) */
  --bg-top: #FAF5E8;
  --bg-bottom: #EEE2C6;
  --surface: #FFFFFF;
  --surface-alt: #F5EFE0;
  --ink: #26332B;
  --ink-dim: #75816F;
  --accent: #3E7D82;
  --accent-dim: #2E6368;
  --accent-warm: #B8862E;
  --on-accent: #FBF7EC;
  --line: rgba(38,51,43,0.11);
  --danger: #A85940;
  --success: #5D8A56;
  --purple-accent: #6E5F94;
  --blueprint-bg: #212E27;
  --blueprint-ink: #F3EEE1;
  --scrim-soft: rgba(38,51,43,0.04);
  --scrim-strong: rgba(38,51,43,0.55);
  --scrim-mid: rgba(250,245,232,0.55);
  --badge-bg: rgba(255,255,255,0.72);
  --badge-border: rgba(38,51,43,0.14);

  /* AuroraGate-only palett (fast, følger ikke lyst/mørkt tema) */
  --aurora-stone-deep: #2A2724;
  --aurora-stone: #3B3733;
  --aurora-stone-lift: #4A443E;
  --aurora-fjord: #3E7D82;
  --aurora-fjord-lys: #7FB8B5;
  --aurora-birch: #F0EADD;
  --aurora-moss: #D2CABC;
  --aurora-rowan: #F2C2A4;

  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;

  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 20px;
  --radius-full: 100px; --radius-gate: 24px;

  --shadow-resting: 0 10px 24px rgba(38,51,43,0.09), 0 2px 6px rgba(38,51,43,0.07);
  --shadow-floating: 0 10px 22px rgba(38,51,43,0.28), 0 0 0 1px rgba(255,255,255,0.14) inset;
  --shadow-elevated: 0 24px 60px rgba(38,51,43,0.16), 0 2px 8px rgba(38,51,43,0.08), 0 0 0 1px rgba(62,125,130,0.06);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 60px -22px rgba(38,52,66,0.30), 0 4px 16px -8px rgba(38,52,66,0.16);
}

:root[data-theme="dark"] {
  --bg-top: #1B241E;
  --bg-bottom: #121914;
  --surface: #212B24;
  --surface-alt: #283428;
  --ink: #EDE6D6;
  --ink-dim: #93A091;
  --accent: #5FA3A8;
  --accent-dim: #3E7D82;
  --accent-warm: #D3A63E;
  --on-accent: #16211C;
  --line: rgba(237,230,214,0.10);
  --danger: #C97A5C;
  --success: #7CAD74;
  --purple-accent: #9385B5;
  --blueprint-bg: #0F1512;
  --blueprint-ink: #EDE6D6;
  --scrim-soft: rgba(18,25,20,0.05);
  --scrim-strong: rgba(18,25,20,0.7);
  --scrim-mid: rgba(18,25,20,0.6);
  --badge-bg: rgba(33,43,36,0.72);
  --badge-border: rgba(237,230,214,0.16);
  --shadow-resting: 0 10px 26px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-top: #1B241E;
    --bg-bottom: #121914;
    --surface: #212B24;
    --surface-alt: #283428;
    --ink: #EDE6D6;
    --ink-dim: #93A091;
    --accent: #5FA3A8;
    --accent-dim: #3E7D82;
    --accent-warm: #D3A63E;
    --on-accent: #16211C;
    --line: rgba(237,230,214,0.10);
    --danger: #C97A5C;
    --success: #7CAD74;
    --purple-accent: #9385B5;
    --blueprint-bg: #0F1512;
    --blueprint-ink: #EDE6D6;
    --scrim-soft: rgba(18,25,20,0.05);
    --scrim-strong: rgba(18,25,20,0.7);
    --scrim-mid: rgba(18,25,20,0.6);
    --badge-bg: rgba(33,43,36,0.72);
    --badge-border: rgba(237,230,214,0.16);
    --shadow-resting: 0 10px 26px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.3);
  }
}

/* Typografi-stiler (uttrekk av det appen faktisk bruker) */
.t-hero { font-family: var(--font-display); font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.t-title { font-family: var(--font-display); font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.t-heading { font-family: var(--font-display); font-size: 18px; line-height: 1.3; font-weight: 600; }
.t-card-title { font-family: var(--font-display); font-size: 16px; line-height: 1.3; font-weight: 600; }
.t-stat { font-family: var(--font-display); font-size: 17px; line-height: 1.2; font-weight: 700; }
.t-label-caps { font-family: var(--font-display); font-size: 14px; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.t-body { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; font-weight: 400; }
.t-button { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 600; }
.t-caption { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; font-style: italic; }
.t-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.t-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.t-data { font-family: var(--font-mono); font-size: 13px; }
.t-badge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }