/* ============================================================
   gad.studio · designsystem v1.0 — design tokens
   DEPLOY-KOPI: kanonisk fil er ../design-system/tokens.css —
   redigér dér og kopiér herind.
   ------------------------------------------------------------
   Én kilde til sandhed for begge sites:
     · gad.studio        (Squarespace — værdierne indtastes i Site Styles)
     · design.gad.studio (statisk site — link denne fil FØR styles.css
                          og slet den gamle :root-blok i styles.css)

   Skrifter indlæses af hvert site selv (Google Fonts):
     Fraunces 600/700 (+italic) · Inter 400/500/600
   ============================================================ */

:root {

  /* ---------- Grundflader (varmt papir) ---------- */
  --gad-paper:        #f6f1e8;   /* side-baggrund */
  --gad-panel:        #fffdf8;   /* kort, felter, paneler */
  --gad-field:        #fffef9;   /* input-flader */
  --gad-wash:         #f4eee0;   /* fremhævet række, total-linje */

  /* ---------- Blæk (varm nær-sort tekst) ---------- */
  --gad-ink:          #221c13;   /* primær tekst */
  --gad-ink-soft:     #3d3526;   /* sekundær tekst */
  --gad-muted:        #6f6553;   /* dæmpet tekst, hjælpetekst */

  /* ---------- Linjer ---------- */
  --gad-line:         #e5dcc9;   /* kanter og rammer */
  --gad-line-soft:    #eee6d6;   /* svage delelinjer */

  /* ---------- Messing (primær accent — håndværkets varme) ---------- */
  --gad-brass:        #a87b2f;   /* accent, CTA-gradientens bund */
  --gad-brass-bright: #c9a227;   /* CTA-gradientens top, højlys */
  --gad-brass-ink:    #7c5a20;   /* accent som TEKST på lys flade (AA) */

  /* ---------- Navy (brandets blæk — logoets farve) ---------- */
  --gad-navy:         #10295B;   /* logo, links, fokus, info */
  --gad-navy-deep:    #0b1d40;   /* link-hover, tryk-tilstand */
  --gad-navy-wash:    #e8ebf4;   /* svag navy-tint til info-flader */

  /* ---------- Emalje (produktfarve — emaljeskiltene) ---------- */
  --gad-cobalt:       #1e3f8f;   /* KUN produkt: emalje-flader, konfigurator-farvevalg */
  --gad-cobalt-ink:   #18306d;
  --gad-cobalt-wash:  #e9edf8;

  /* ---------- Espresso (mørke flader: footer, prispanel) ---------- */
  --gad-espresso:       #241d12; /* footer */
  --gad-espresso-soft:  #2a2214; /* prispanel-gradient top */
  --gad-espresso-deep:  #1c1710; /* prispanel-gradient bund */
  --gad-cream:          #f3edde; /* primær tekst på mørk flade */
  --gad-cream-muted:    #bfb49c; /* sekundær tekst på mørk flade */
  --gad-cream-faint:    #8d8368; /* svagest tilladte tekst på mørk flade */

  /* ---------- Semantik ---------- */
  --gad-success:      #3e7d4f;   /* bekræftet, betalt, på lager */
  --gad-danger:       #a03a2a;   /* fejl, fjern, udsolgt */
  --gad-info:         var(--gad-navy);

  /* ---------- Fokus (synlig på alt interaktivt) ---------- */
  --gad-focus-ring:   0 0 0 3px color-mix(in srgb, var(--gad-navy) 45%, transparent);

  /* ---------- Typografi ---------- */
  --gad-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --gad-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                      "Helvetica Neue", Arial, sans-serif;

  --gad-text-xs:   0.78rem;                    /* noter, disclaimers */
  --gad-text-sm:   0.88rem;                    /* UI-tekst, labels */
  --gad-text-base: 1rem;                       /* brødtekst */
  --gad-text-md:   1.08rem;                    /* lede/manchet */
  --gad-text-lg:   1.25rem;                    /* kort-titler */
  --gad-text-xl:   1.7rem;                     /* sektionstitler */
  --gad-text-2xl:  clamp(1.7rem, 3vw, 2.3rem); /* sidetitler */
  --gad-text-3xl:  clamp(2.2rem, 4.6vw, 3.4rem); /* hero */

  --gad-leading-tight: 1.08;  /* display-overskrifter */
  --gad-leading-body:  1.55;  /* brødtekst */

  /* ---------- Afstande (4px-skala) ---------- */
  --gad-space-1: 4px;
  --gad-space-2: 8px;
  --gad-space-3: 12px;
  --gad-space-4: 16px;
  --gad-space-5: 20px;
  --gad-space-6: 24px;
  --gad-space-7: 32px;
  --gad-space-8: 40px;
  --gad-space-9: 48px;
  --gad-space-10: 64px;

  /* ---------- Radius ---------- */
  --gad-radius-sm:  8px;    /* inputs, små elementer */
  --gad-radius-md:  10px;   /* felter, indre kort */
  --gad-radius-lg:  16px;   /* kort, paneler, modaler */
  --gad-radius-pill: 999px; /* knapper, chips, tags */

  /* ---------- Skygger (varme, aldrig grå) ---------- */
  --gad-shadow-soft:  0 4px 16px rgba(60, 45, 20, 0.08);
  --gad-shadow-lift:  0 10px 30px rgba(60, 45, 20, 0.10), 0 2px 8px rgba(60, 45, 20, 0.06);
  --gad-shadow-modal: 0 30px 80px rgba(20, 12, 0, 0.35);

  /* ---------- Bevægelse ---------- */
  --gad-t-fast: 120ms;  /* hover, tryk */
  --gad-t-base: 180ms;  /* kort-løft, chips */
  --gad-t-slow: 240ms;  /* toast, modal */
  --gad-ease:   cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ============================================================
     Bagudkompatible aliaser — design.gad.studio/css/styles.css
     bruger disse navne i dag. Behold dem, indtil styles.css er
     migreret til --gad-*-navnene.
     ============================================================ */
  --paper:         var(--gad-paper);
  --panel:         var(--gad-panel);
  --ink:           var(--gad-ink);
  --ink-soft:      var(--gad-ink-soft);
  --muted:         var(--gad-muted);
  --line:          var(--gad-line);
  --line-soft:     var(--gad-line-soft);
  --accent:        var(--gad-brass);
  --accent-bright: var(--gad-brass-bright);
  --accent-ink:    var(--gad-brass-ink);
  --danger:        var(--gad-danger);
  --radius:        var(--gad-radius-lg);
  --radius-sm:     var(--gad-radius-md);
  --shadow:        var(--gad-shadow-lift);
  --shadow-soft:   var(--gad-shadow-soft);
  --display:       var(--gad-font-display);
  --ui:            var(--gad-font-ui);
}