{
  "name": "CELLA",
  "version": 2,
  "meta": {
    "source": "Cella test Brandbook & virksomhedspræsentation (okt 2026): brandfarver 01-12, HomeKit Human/Animal, produktfarver, logo (officielle SVG), Libre Baskerville + Inter. ELS-valg: tre verdener (dig/hest/hund) med hund i jordbrun; afledte værdier er markeret."
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Lys"
      }
    ],
    "tokens": [
      {
        "name": "bone",
        "value": "#fbfaf7",
        "usage": "Sidebaggrund (surface-page). Brandfarve 05 #FBFAF7 i Brandbog (okt 2026)."
      },
      {
        "name": "bone-2",
        "value": "#f3efe6",
        "usage": "Rapportflade, kort på bone og sekundære flader. HomeKit-bone #F3EFE6 i Brandbog (okt 2026)."
      },
      {
        "name": "bone-3",
        "value": "#eae8e1",
        "usage": "Paneler, skillelinjer i flader og fotoplaceholder. Brandfarve 06 #EAE8E1."
      },
      {
        "name": "white",
        "value": "#ffffff",
        "usage": "Kort og inputfelter oven på bone."
      },
      {
        "name": "ink",
        "value": "#332e30",
        "usage": "Brødtekst og overskrifter på bone, bone-2 og hvid (12.8:1 på bone). Brandfarve 08 #332E30."
      },
      {
        "name": "ink-2",
        "value": "#484545",
        "usage": "Dæmpet tekst (text-muted) på bone, bone-2 og hvid (9.1:1). Logoets grå tekstfarve."
      },
      {
        "name": "ink-3",
        "value": "#6b6567",
        "usage": "Meta, datoer og hjælpetekst (text-subtle) på bone, bone-2 og hvid (5.5:1 på bone). Afledt af ink, ikke i brandbogen."
      },
      {
        "name": "ink-4",
        "value": "#a8a3a4",
        "usage": "Kun deaktiverede elementer og skillelinjer uden betydning. Ikke til tekst. Afledt."
      },
      {
        "name": "green",
        "value": "#1a3025",
        "usage": "Mørkegrøn. Primær knap, inverse flader, footer og nøgletal (bone på green 13.5:1). Brandfarve 04 #1A3025."
      },
      {
        "name": "green-dark",
        "value": "#0f1e17",
        "usage": "Hover på primær knap og links. Afledt af green."
      },
      {
        "name": "sage-100",
        "value": "#9bb6a3",
        "usage": "Lys salvie til illustrationer og flader. Ikke til tekst. Brandfarve 01."
      },
      {
        "name": "sage-300",
        "value": "#6e8f7b",
        "usage": "Mellem salvie til grafik og ikoner på lyse flader (3.4:1, kun 24 px+). Brandfarve 02."
      },
      {
        "name": "earth",
        "value": "#5e4b3f",
        "usage": "Jordbrun. Hundeprodukternes farve og accent for hund. Brandfarve 07."
      },
      {
        "name": "sky-100",
        "value": "#c1ddf8",
        "usage": "Lys himmelblå til flader og grafik. Ikke til tekst. Brandfarve 09."
      },
      {
        "name": "sky-300",
        "value": "#89a4bd",
        "usage": "Dueblå til grafik. Ikke til tekst. Brandfarve 10."
      },
      {
        "name": "blue-500",
        "value": "#3a5775",
        "usage": "Blå til tekst og knapper på lyse flader (7.2:1 på bone). Brandfarve 11."
      },
      {
        "name": "blue-900",
        "value": "#193857",
        "usage": "Dyb blå til inverse flader for mennesker. Brandfarve 12."
      },
      {
        "name": "mist",
        "value": "{bone-3}",
        "usage": "Paneler og rapportfelter (surface-panel)."
      },
      {
        "name": "mist-2",
        "value": "#dcd8ce",
        "usage": "Spor bag rapportens søjler. Afledt af bone-3."
      },
      {
        "name": "green-tint",
        "value": "{bone-3}",
        "usage": "Hover på sekundær knap og lys accentflade uden verden."
      },
      {
        "name": "gold",
        "value": "#bea669",
        "usage": "Guldet i logoet og brandets signatur (#BEA669; brandbogen skriver også #BEA66A). Flade, C-disk, linjer og markører; guld på green 5.9:1. Aldrig brødtekst på bone (2.3:1); store overskrifter i guld som i brandbogen kun fra 32 px og helst på mørk flade."
      },
      {
        "name": "gold-print",
        "value": "#b79d63",
        "usage": "Guld på HomeKit-emballagen (#B79D63). Til tryk og emballage."
      },
      {
        "name": "gold-dark",
        "value": "#75592a",
        "usage": "Guld som læsbar tekst på lyse flader (6.3:1 på bone), fx status Lavt. Afledt af gold."
      },
      {
        "name": "gold-light",
        "value": "#e8d7a8",
        "usage": "Lys guldflade, fx eyebrow-boks på green. Afledt."
      },
      {
        "name": "human",
        "value": "#50748a",
        "usage": "Verdensaccent for dig (mennesker): prik, linje, tag, 3px kant, accentknap (hvid på human 5.0:1). HomeKit Human-blå #50748A i Brandbog (okt 2026)."
      },
      {
        "name": "human-light",
        "value": "#d7e3ef",
        "usage": "Lys flade bag WorldTag og felter i for dig. HomeKit Human #D7E3EF."
      },
      {
        "name": "hest",
        "value": "#5b705e",
        "usage": "Verdensaccent for hest: prik, linje, tag, 3px kant, accentknap (hvid på hest 5.4:1). HomeKit Animal-grøn #5B705E i Brandbog (okt 2026)."
      },
      {
        "name": "hest-light",
        "value": "#d7ddd6",
        "usage": "Lys flade bag WorldTag og felter i for hest. HomeKit Animal #D7DDD6."
      },
      {
        "name": "hund",
        "value": "{earth}",
        "usage": "Verdensaccent for hund (jordbrun fra hundeprodukterne; hvid på hund 8.2:1). ELS' valg: brandbogen samler hest og hund i Animal."
      },
      {
        "name": "hund-light",
        "value": "#eae3dc",
        "usage": "Lys flade bag WorldTag og felter i for hund. Afledt af earth."
      },
      {
        "name": "cat-aminosyrer",
        "value": "#e7cd7f",
        "usage": "Analysekategori Aminosyrer (produktfarve). Søjler, prikker og etiketter; ikke tekst."
      },
      {
        "name": "cat-modstandskraft",
        "value": "#f5a874",
        "usage": "Analysekategori Modstandskraft (produktfarve)."
      },
      {
        "name": "cat-miljo",
        "value": "#c65258",
        "usage": "Analysekategori Miljøpåvirkning (produktfarve)."
      },
      {
        "name": "cat-antioxidanter",
        "value": "#ecc6cd",
        "usage": "Analysekategori Antioxidanter (produktfarve)."
      },
      {
        "name": "cat-elektrisk",
        "value": "#a28ea8",
        "usage": "Analysekategori Elektriske påvirkninger (produktfarve)."
      },
      {
        "name": "cat-vitaminer",
        "value": "#97a985",
        "usage": "Analysekategori Vitaminer (produktfarve)."
      },
      {
        "name": "cat-mineraler",
        "value": "#7392ae",
        "usage": "Analysekategori Mineraler (produktfarve)."
      },
      {
        "name": "surface-page",
        "value": "{bone}",
        "usage": "Baggrund på body."
      },
      {
        "name": "surface-card",
        "value": "{white}",
        "usage": "Kort, inputfelter og produktkort."
      },
      {
        "name": "surface-panel",
        "value": "{mist}",
        "usage": "Paneler og TrustBlock (lys)."
      },
      {
        "name": "surface-inverse",
        "value": "{green}",
        "usage": "Inverse flader, footer og TrustBlock (inverse). Tekst i text-on-inverse."
      },
      {
        "name": "surface-report",
        "value": "{bone-2}",
        "usage": "ReportPreview-fladen."
      },
      {
        "name": "text-primary",
        "value": "{ink}",
        "usage": "Standard tekstfarve på surface-page, -card og -panel."
      },
      {
        "name": "text-muted",
        "value": "{ink-2}",
        "usage": "Lead og forklaringer."
      },
      {
        "name": "text-subtle",
        "value": "{ink-3}",
        "usage": "Meta og hjælpetekst."
      },
      {
        "name": "text-on-inverse",
        "value": "{bone}",
        "usage": "Tekst på green, blue-900, human, hest og hund."
      },
      {
        "name": "text-brand",
        "value": "{green}",
        "usage": "Links og brandtekst på lyse flader."
      },
      {
        "name": "border",
        "value": "rgba(51,46,48,0.12)",
        "usage": "1px hårlinje på kort, paneler og rapportrækker."
      },
      {
        "name": "border-strong",
        "value": "rgba(51,46,48,0.28)",
        "usage": "Ramme på inputfelter og outline-knapper."
      },
      {
        "name": "action-primary",
        "value": "{green}",
        "usage": "Primær knap. Én pr. visning."
      },
      {
        "name": "action-primary-hover",
        "value": "{green-dark}",
        "usage": "Primær knap, hover."
      },
      {
        "name": "focus-ring",
        "value": "{green}",
        "usage": "Fokusring: 2px surface-page + 2px focus-ring."
      },
      {
        "name": "world-accent",
        "value": "{green}",
        "usage": "Aktuel verdens farve, sat af data-world: dig = human, hest = hest, hund = hund. Uden verden: green."
      },
      {
        "name": "world-accent-light",
        "value": "{bone-3}",
        "usage": "Aktuel verdens lyse flade: human-light, hest-light, hund-light."
      },
      {
        "name": "status-ok",
        "value": "{green}",
        "usage": "Rapportstatus I balance."
      },
      {
        "name": "status-low",
        "value": "{gold-dark}",
        "usage": "Rapportstatus Lavt (tekst); søjlen må bruge gold."
      },
      {
        "name": "status-attention",
        "value": "#a8424a",
        "usage": "Rapportstatus Bemærk og fejl (5.7:1 på bone). Afledt af produktfarven #C65258."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "serif": "\"Libre Baskerville\", Georgia, \"Times New Roman\", serif",
      "sans": "\"Inter\", \"Helvetica Neue\", Arial, sans-serif",
      "mono": "\"Inter\", \"Helvetica Neue\", Arial, sans-serif"
    },
    "groups": [
      {
        "name": "Display og overskrifter",
        "family": "serif",
        "styles": [
          {
            "name": "display",
            "fontSize": "72px",
            "lineHeight": 1.08,
            "fontWeight": 400,
            "letterSpacing": "-0.02em",
            "sample": "Mere viden. Ingen gætteri.",
            "usage": "Hero-overskrift. Skaleres ned til 44px på mobil (clamp i bundle.css: --text-display)."
          },
          {
            "name": "h1",
            "fontSize": "52px",
            "lineHeight": 1.12,
            "fontWeight": 400,
            "letterSpacing": "-0.01em",
            "sample": "CELLA for dig",
            "usage": "Sidetitel. 36px på mobil (--text-h1)."
          },
          {
            "name": "h2",
            "fontSize": "36px",
            "lineHeight": 1.15,
            "fontWeight": 400,
            "letterSpacing": "-0.01em",
            "sample": "Konkrete tal, ikke fornemmelser.",
            "usage": "Sektionstitel. 28px på mobil (--text-h2)."
          },
          {
            "name": "h3",
            "fontSize": "24px",
            "lineHeight": 1.15,
            "fontWeight": 400,
            "letterSpacing": "-0.01em",
            "sample": "Marie, 41 - stabil energi hele dagen",
            "usage": "Kortoverskrift i CaseCard, ProductCard og ReportPreview."
          },
          {
            "name": "h4",
            "fontSize": "20px",
            "lineHeight": 1.2,
            "fontWeight": 400,
            "sample": "Vejledning",
            "usage": "Trin i Timeline og mindre overskrifter."
          }
        ]
      },
      {
        "name": "Tekst",
        "family": "sans",
        "styles": [
          {
            "name": "lead",
            "fontSize": "19px",
            "lineHeight": 1.55,
            "fontWeight": 400,
            "sample": "Én test. En konkret rapport. Og en vejleder, der gennemgår den med dig.",
            "usage": "Indledende afsnit under en overskrift. Farve text-muted."
          },
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": 1.55,
            "fontWeight": 400,
            "sample": "Du tager prøven hjemme og sender den retur.",
            "usage": "Brødtekst. Farve text-primary."
          },
          {
            "name": "small",
            "fontSize": "14px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "sample": "Udvalgt til dig ud fra din rapport.",
            "usage": "Tekst i kort, dl-rader og hjælpetekst."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "sample": "Et optimerings- og vejledningsredskab - ikke en diagnostisk undersøgelse.",
            "usage": "Fodnoter, status-ord og meta. Farve text-subtle."
          },
          {
            "name": "eyebrow",
            "fontSize": "12px",
            "lineHeight": 1.2,
            "fontWeight": 500,
            "letterSpacing": "0.14em",
            "sample": "HVAD RAPPORTEN VISER",
            "usage": "Versaler med 0.14em spatiering over en overskrift og i WorldTag."
          },
          {
            "name": "button",
            "fontSize": "15px",
            "lineHeight": 1,
            "fontWeight": 500,
            "letterSpacing": "0.005em",
            "sample": "Tag testen",
            "usage": "Knaptekst (sm 14px, lg 17px). Kort imperativ."
          }
        ]
      },
      {
        "name": "Tal og data (Inter, tabulære tal)",
        "family": "mono",
        "styles": [
          {
            "name": "price",
            "fontSize": "20px",
            "lineHeight": 1.2,
            "fontWeight": 400,
            "sample": "495 kr.",
            "usage": "Pris i ProductCard. Tabulære tal."
          },
          {
            "name": "value",
            "fontSize": "15px",
            "lineHeight": 1.2,
            "fontWeight": 400,
            "sample": "72",
            "usage": "Rapportværdier 0-100 i ReportPreview. Tabulære tal, farve efter status."
          },
          {
            "name": "stamp",
            "fontSize": "12px",
            "lineHeight": 1.2,
            "fontWeight": 400,
            "sample": "04.09.2026",
            "usage": "Datoer, trinnumre (01, 02) og hex-koder."
          }
        ]
      }
    ]
  },
  "spacing": {
    "note": "4-baseret skala. Sektioner 96px lodret (64px på mobil). Container 1200, smal 720, gutter clamp(20px,5vw,64px) i bundle.css.",
    "tokens": [
      {
        "name": "s-1",
        "value": "4px",
        "usage": "Mindste afstand: prik til tekst."
      },
      {
        "name": "s-2",
        "value": "8px",
        "usage": "Gap mellem ikon og tekst, dl-rader."
      },
      {
        "name": "s-3",
        "value": "12px",
        "usage": "Gap i kortindhold, padding i tags."
      },
      {
        "name": "s-4",
        "value": "16px",
        "usage": "Gap mellem kort, padding i inputfelter."
      },
      {
        "name": "s-5",
        "value": "24px",
        "usage": "Padding i kort."
      },
      {
        "name": "s-6",
        "value": "32px",
        "usage": "Gap mellem kolonner."
      },
      {
        "name": "s-7",
        "value": "48px",
        "usage": "Afstand fra sektionsoverskrift til indhold."
      },
      {
        "name": "s-8",
        "value": "64px",
        "usage": "Sektionsafstand på mobil."
      },
      {
        "name": "s-9",
        "value": "96px",
        "usage": "Sektionsafstand på desktop."
      },
      {
        "name": "s-10",
        "value": "144px",
        "usage": "Hero-afstand og store pauser."
      },
      {
        "name": "container",
        "value": "1200px",
        "usage": "Maks bredde på sideindhold."
      },
      {
        "name": "container-narrow",
        "value": "720px",
        "usage": "Maks bredde på tekstsider."
      },
      {
        "name": "control-h",
        "value": "48px",
        "usage": "Højde på knapper (md) og inputfelter."
      },
      {
        "name": "control-h-sm",
        "value": "36px",
        "usage": "Højde på små knapper."
      },
      {
        "name": "border-w",
        "value": "1px",
        "usage": "Hårlinje."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-xs",
        "value": "2px",
        "usage": "Rapportens søjlespor."
      },
      {
        "name": "radius-sm",
        "value": "4px",
        "usage": "Små flader og chips."
      },
      {
        "name": "radius-md",
        "value": "8px",
        "usage": "Kort, inputfelter, paneler og rapportflade."
      },
      {
        "name": "radius-lg",
        "value": "16px",
        "usage": "Store fliser: verdensvælger og TrustBlock."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Knapper og WorldTag."
      },
      {
        "name": "radius-cell",
        "value": "50%",
        "usage": "Portrætter, prikker og cellemotivet."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-none",
        "value": "none",
        "usage": "Hvile. Ingen skygge på kort i hvile."
      },
      {
        "name": "shadow-raise",
        "value": "0 1px 2px rgba(51,46,48,0.06), 0 8px 24px -12px rgba(51,46,48,0.18)",
        "usage": "Kun hover: kort og verdensvælger løftes 2-3px."
      }
    ]
  }
}