/* Gainfully design tokens (runde 5) - eneste sted farver og fonte defineres.
   Siden foelger besoegendes systemtema. Havglas (--progress) betyder kun "du blev staerkere". */
:root {
  color-scheme: dark light;

  --bg: #17181B;
  --surface: #202125;
  --surface-2: #292A2F;
  --border: #34363B;
  --input-border: #6B6D74;
  --text: #F3F2EE;
  --text-muted: #B0B2B8;

  --action: #F3F2EE;
  --on-action: #17181B;

  --progress: #3DDC97;
  --progress-text: #3DDC97;
  --progress-soft: #243B35;

  --warning: #F5A524;
  --danger: #F87171;

  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Aliaser fra den tidligere palet, saa siderne ikke skal skrives om linje for linje.
     Accent er nu den neutrale handlingsfarve (ben-hvid i moerk, grafit i lys). */
  --surface-3: var(--surface-2);
  --divider: var(--border);
  --accent: var(--action);
  --accent-fill: var(--action);
  --on-accent: var(--on-action);
  --accent-soft: var(--surface-2);
  --accent-soft-solid: var(--surface-2);
  --accent-border: var(--border);
  --accent-border-strong: var(--input-border);
  --success: var(--text);
  --success-soft: var(--surface-2);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F4F3EF;
    --surface: #FFFFFF;
    --surface-2: #EEEDE8;
    --border: #E0DED8;
    --input-border: #8A8C91;
    --text: #17181B;
    --text-muted: #5B5E65;

    --action: #17181B;
    --on-action: #F4F3EF;

    --progress: #199A68;
    --progress-text: #0A7A4F;
    --progress-soft: #E0F9EE;

    --warning: #B45309;
    --danger: #B91C1C;
  }
}

/* App-udsnit paa forsiden: altid moerke (som appens delkort), undtagen hero-telefonen (.app-follow),
   der foelger besoegendes tema. Vaerdier = constants/colors.ts i appen. */
.app {
  --a-bg: #17181B;
  --a-surface: #202125;
  --a-surface-2: #292A2F;
  --a-border: #34363B;
  --a-input: #6B6D74;
  --a-text: #F3F2EE;
  --a-muted: #B0B2B8;
  --a-action: #F3F2EE;
  --a-on-action: #17181B;
  --a-progress: #3DDC97;
  --a-progress-text: #3DDC97;
  --a-progress-soft: #243B35;
  --a-bar-empty: #292A2F;
  --a-photo: #2A2C31;
  --a-photo-text: #8A8C93;
  --bezel: #0B0C0E;
}

@media (prefers-color-scheme: light) {
  .app.app-follow {
    --a-bg: #F4F3EF;
    --a-surface: #FFFFFF;
    --a-surface-2: #EEEDE8;
    --a-border: #E0DED8;
    --a-input: #8A8C91;
    --a-text: #17181B;
    --a-muted: #5B5E65;
    --a-action: #17181B;
    --a-on-action: #F4F3EF;
    --a-progress: #199A68;
    --a-progress-text: #0A7A4F;
    --a-progress-soft: #E0F9EE;
    --a-bar-empty: #E6E4DE;
  }
}

:root { --shadow: rgba(8, 9, 11, 0.45); }
@media (prefers-color-scheme: light) { :root { --shadow: rgba(23, 24, 27, 0.12); } }