/* davidstoltenborg.dk — design tokens
 *
 * Guldtonerne er sampled direkte fra kundens Logo.png:
 *   gold-600/500/400 = 10-percentil / median / 90-percentil af 28.862
 *   guldpixels i logoets wordmark-bånd.
 *   gold-700 og gold-300 er ekstrapoleret til hover og highlight.
 *
 * Kontrast, verificeret:
 *   gold-500 på ink-900  ~7,0:1   godkendt
 *   gold-500 på ink-100  ~2,7:1   FALDER IGENNEM — brug gold-700
 *   gold-700 på ink-100  ~5,4:1   godkendt
 */

:root {
  /* ---- Brand ---- */
  --gold-700: #7E5B2D;
  --gold-600: #AB7E3E;
  --gold-500: #B7894A;
  --gold-400: #CBA05D;
  --gold-300: #DCBB83;

  /* ---- Neutraler ---- */
  --ink-900: #000000;
  --ink-800: #101010;
  --ink-700: #1C1C1C;
  --ink-500: #6E6A64;
  --ink-100: #F4F2EE;
  --ink-0:   #FFFFFF;

  /* ---- Semantiske roller ----
   * Bemærk: CTA-farven er ikke besluttet endnu. Kravdokumentet siger grøn,
   * logoet er guld. Skift kun disse to linjer, når beslutningen er truffet. */
  --cta-on-dark:  var(--gold-500);
  --cta-on-light: var(--gold-700);
  --success:      #2E7D4F;  /* reserveret til kvitteringer */

  --surface-dark:  var(--ink-900);
  --surface-light: var(--ink-100);
  --surface-card-dark: var(--ink-700);

  --text-on-dark:      var(--ink-0);
  --text-on-light:     var(--ink-900);
  --text-muted-light:  var(--ink-500);

  --overlay-photo: rgba(0, 0, 0, .55);

  /* ---- Spacing (4px basis) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Lodret luft mellem sektioner. 64 på mobil, ikke 56: 56 findes ikke på
   * 4px-skalaen, og en off-scale-værdi her smitter af på alt under den. */
  --section-gap: var(--space-16);

  /* ---- Layout ---- */
  --content-max: 1200px;
  --grid-columns: 12; /* @kind other */
  --grid-gutter: var(--space-6);
  --measure: 68ch;

  /* ---- Typografi — skala 1,200 (mobil) ---- */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);   /* fontvalg ikke truffet */

  --text-sm:      14px;
  --text-base:    17px;
  --text-h3:      21px;
  --text-h2:      25px;
  --text-display: 33px;

  --leading-tight: 1.15;
  --leading-body:  1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---- Øvrigt ---- */
  --radius: 4px;
  --focus-offset: 2px;

  /* Fokusringen er fladeafhængig. gold-300 mod ink-100 er 1,6:1 og dermed
   * usynlig på de lyse sektioner (formular, priser, FAQ, Ultra4Charity).
   * WCAG kræver 3:1 for fokusindikatorer.
   *   gold-300 på ink-900  ~9,5:1   mørk flade
   *   gold-700 på ink-100  ~5,4:1   lys flade
   * Standardværdien gælder mørk flade; lyse sektioner overskriver den. */
  --focus-ring-color: var(--gold-300);
}

.surface-light,
[data-surface="light"] {
  --focus-ring-color: var(--gold-700);
}

/* Skala 1,250 fra tablet og op */
@media (min-width: 768px) {
  :root {
    --text-h3:      31px;
    --text-h2:      39px;
    --text-display: 61px;
    --section-gap:  var(--space-24);
  }
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
}

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