/* Vinther Consulting — Design Tokens (CSS custom properties)
   v2.0.0 · 2026-06-25 · Ejer: Kreativ Direktør / Brand
   Redesign (VIN-63): "Rolig selvsikkerhed" — dybere evergreen, varm rav-accent,
   moderne nordisk grotesk-typografi. Website og al UI SKAL bruge disse variabler
   frem for hårdkodede værdier. */

:root {
  /* ---- Farve: palette ---- */
  /* Evergreen — dybere, rigere og mere levende end den gamle petrol */
  --vc-green-900: #0A1F1B;   /* "forest ink" — mørke sektioner, footer */
  --vc-green-800: #0B3A32;
  --vc-green-700: #10564A;   /* brand primær */
  --vc-green-500: #1C8270;
  --vc-green-300: #6FB9AB;
  --vc-green-100: #D7E8E3;
  --vc-green-50:  #EDF5F2;

  /* Amber — varm, optimistisk signaturfarve (afløser terracotta) */
  --vc-amber-700: #B97E22;
  --vc-amber-500: #E6A23C;
  --vc-amber-400: #F2B454;   /* hover-trin mellem 500 og 300 */
  --vc-amber-300: #F2C885;
  --vc-amber-100: #FBEFD8;

  /* Varme neutraler — elfenben i stedet for grålig sand */
  --vc-ivory-100: #F2EEE4;
  --vc-ivory-50:  #FBF9F4;
  --vc-ink-900: #14201D;
  --vc-ink-600: #54635E;
  --vc-ink-400: #8A958F;
  --vc-white:   #FFFFFF;
  --vc-border-warm: #E7E1D3;

  --vc-success: #2F7D5B;
  --vc-warning: #B97E22;
  --vc-danger:  #B23A2E;
  --vc-info:    #10564A;

  /* ---- Farve: roller (brug disse i komponenter) ---- */
  --vc-brand-primary:      var(--vc-green-700);
  --vc-brand-primary-dark: var(--vc-green-900);
  --vc-accent:             var(--vc-amber-500);
  --vc-accent-hover:       var(--vc-amber-400);
  --vc-accent-dark:        var(--vc-amber-700);
  --vc-page-bg:            var(--vc-ivory-50);
  --vc-surface:            var(--vc-white);
  --vc-surface-alt:        var(--vc-green-50);
  --vc-text-primary:       var(--vc-ink-900);
  --vc-text-secondary:     var(--vc-ink-600);
  --vc-text-on-brand:      var(--vc-white);
  --vc-border:             var(--vc-border-warm);
  --vc-focus-ring:         var(--vc-green-500);

  /* ---- Typografi ---- */
  /* Display: Schibsted Grotesk — moderne nordisk grotesk. Body: Inter. */
  --vc-font-display: "Schibsted Grotesk", "Inter", "Segoe UI", Arial, system-ui, sans-serif;
  --vc-font-body:    "Inter", "Segoe UI", Calibri, Arial, system-ui, sans-serif;
  --vc-weight-regular: 400;
  --vc-weight-medium: 500;
  --vc-weight-semibold: 600;
  --vc-weight-bold: 700;
  --vc-weight-black: 800;

  /* type-skala: større, mere editorial */
  --vc-display: 3.25rem;  --vc-display-lh: 3.5rem;
  --vc-h1: 2.25rem;       --vc-h1-lh: 2.6rem;
  --vc-h2: 1.75rem;       --vc-h2-lh: 2.1rem;
  --vc-h3: 1.3125rem;     --vc-h3-lh: 1.75rem;
  --vc-body-lg: 1.1875rem;--vc-body-lg-lh: 1.85rem;
  --vc-body: 1rem;        --vc-body-lh: 1.6rem;
  --vc-small: 0.875rem;   --vc-small-lh: 1.3125rem;
  --vc-caption: 0.75rem;  --vc-caption-lh: 1rem;

  /* ---- Spacing (4px base) ---- */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 24px;
  --vc-space-6: 32px;
  --vc-space-7: 48px;
  --vc-space-8: 64px;
  --vc-space-9: 96px;

  /* ---- Radius ---- */
  --vc-radius-sm: 6px;
  --vc-radius-md: 12px;
  --vc-radius-lg: 20px;
  --vc-radius-pill: 999px;

  /* ---- Shadow ---- */
  --vc-shadow-sm: 0 1px 2px rgba(10,31,27,0.06);
  --vc-shadow-md: 0 6px 20px rgba(10,31,27,0.08);
  --vc-shadow-lg: 0 20px 48px rgba(10,31,27,0.14);

  /* ---- Layout ---- */
  --vc-max-content: 1140px;
  --vc-gutter: 24px;
  --vc-section-spacing: 112px;
}

/* Eksempel-primitiver (referenceimplementering) */
.vc-btn {
  font-family: var(--vc-font-body);
  font-weight: var(--vc-weight-semibold);
  font-size: var(--vc-body);
  padding: var(--vc-space-3) var(--vc-space-5);
  border-radius: var(--vc-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
}
.vc-btn--primary { background: var(--vc-brand-primary); color: var(--vc-text-on-brand); }
.vc-btn--primary:hover { background: var(--vc-brand-primary-dark); }
.vc-btn--secondary { background: transparent; color: var(--vc-brand-primary); border-color: var(--vc-brand-primary); }
.vc-btn:focus-visible { outline: 3px solid var(--vc-focus-ring); outline-offset: 2px; }