/* =============================================================
   Aarhus Kommune — Design Tokens
   Colors extracted from the official Farvekoder document.
   ============================================================= */

:root {
  /* =========================================================
     COLOR
     Two brand colors (blue + coral), four state colors, and a
     neutral gray scale. Every color ships a 50→900 scale; 500 is
     the base hue. Lighter steps (50–200) for surfaces and soft
     fills, darker steps (600–900) for text, borders and hover.
     ========================================================= */

  /* ---- Brand · Primary (Blue) ------------------------------- */
  --itkaarhus-blue-50:  #e6f2f6;
  --itkaarhus-blue-100: #cce4ed;
  --itkaarhus-blue-200: #99c9db;
  --itkaarhus-blue-300: #66aec9;
  --itkaarhus-blue-400: #3393b6;
  --itkaarhus-blue-500: #007ba6;  /* base — primary */
  --itkaarhus-blue-600: #006385;  /* primary hover */
  --itkaarhus-blue-700: #004f6b;
  --itkaarhus-blue-800: #003a4f;
  --itkaarhus-blue-900: #002835;

  /* ---- Brand · Secondary (Coral) ---------------------------- */
  --itkaarhus-coral-50:  #fff0eb;
  --itkaarhus-coral-100: #ffe1d7;
  --itkaarhus-coral-200: #ffc4b0;
  --itkaarhus-coral-300: #ffa288;
  --itkaarhus-coral-400: #ff8160;
  --itkaarhus-coral-500: #ff5f31;  /* base — secondary */
  --itkaarhus-coral-600: #e54d24;
  --itkaarhus-coral-700: #cc4820;  /* secondary hover */
  --itkaarhus-coral-800: #a33616;
  --itkaarhus-coral-900: #7a2810;

  /* ---- State · Info (Cyan) ---------------------------------- */
  --itkaarhus-info-50:  #e6f6fa;
  --itkaarhus-info-100: #cceef4;
  --itkaarhus-info-200: #99dde9;
  --itkaarhus-info-300: #66cbde;
  --itkaarhus-info-400: #33bad8;
  --itkaarhus-info-500: #00a5cd;  /* base */
  --itkaarhus-info-600: #0090b6;
  --itkaarhus-info-700: #007b9b;
  --itkaarhus-info-800: #006076;
  --itkaarhus-info-900: #005269;

  /* ---- State · Success (Green) ------------------------------ */
  --itkaarhus-success-50:  #e6f4ec;
  --itkaarhus-success-100: #cce8d8;
  --itkaarhus-success-200: #99d1b1;
  --itkaarhus-success-300: #66ba8b;
  --itkaarhus-success-400: #33a364;
  --itkaarhus-success-500: #008d3d;  /* base */
  --itkaarhus-success-600: #007d36;
  --itkaarhus-success-700: #006a2d;
  --itkaarhus-success-800: #005624;
  --itkaarhus-success-900: #00481e;

  /* ---- State · Warning (Amber) ------------------------------ */
  --itkaarhus-warning-50:  #fef7e0;
  --itkaarhus-warning-100: #fdecb8;
  --itkaarhus-warning-200: #fbdd85;
  --itkaarhus-warning-300: #f9cd52;
  --itkaarhus-warning-400: #f7c229;
  --itkaarhus-warning-500: #f5b800;  /* base */
  --itkaarhus-warning-600: #d39e00;
  --itkaarhus-warning-700: #b38600;
  --itkaarhus-warning-800: #8c6900;
  --itkaarhus-warning-900: #7a5b00;

  /* ---- State · Danger (Red) --------------------------------- */
  /* True cool red — deliberately shifted off coral's orange (hue ~353° vs
     coral ~13°) so danger and the secondary brand colour stay distinguishable. */
  --itkaarhus-danger-50:  #fdecee;
  --itkaarhus-danger-100: #f9d2d7;
  --itkaarhus-danger-200: #f0a2ac;
  --itkaarhus-danger-300: #e57382;
  --itkaarhus-danger-400: #db4458;
  --itkaarhus-danger-500: #cc1f33;  /* base */
  --itkaarhus-danger-600: #b51a2c;
  --itkaarhus-danger-700: #9c1626;
  --itkaarhus-danger-800: #7d1620;
  --itkaarhus-danger-900: #64141b;

  /* ---- Neutral · Gray --------------------------------------- */
  --itkaarhus-white:    #ffffff;   /* true white — page background */
  --itkaarhus-gray-50:  #f7f8fa;
  --itkaarhus-gray-100: #eef1f5;
  --itkaarhus-gray-200: #dfe3ea;
  --itkaarhus-gray-300: #c7ccd4;
  --itkaarhus-gray-400: #9aa1ae;
  --itkaarhus-gray-500: #6b7484;
  --itkaarhus-gray-600: #515967;
  --itkaarhus-gray-700: #3f4654;
  --itkaarhus-gray-800: #2a2f38;
  --itkaarhus-gray-900: #111318;   /* body copy, darkest ink */

  /* ---- Roles ------------------------------------------------ */
  --itkaarhus-primary:          var(--itkaarhus-blue-500);
  --itkaarhus-primary-hover:    var(--itkaarhus-blue-600);
  --itkaarhus-secondary:        var(--itkaarhus-coral-500);
  --itkaarhus-secondary-hover:  var(--itkaarhus-coral-700);

  --itkaarhus-info:        var(--itkaarhus-info-500);
  --itkaarhus-info-soft:   var(--itkaarhus-info-100);
  --itkaarhus-success:     var(--itkaarhus-success-500);
  --itkaarhus-success-soft:var(--itkaarhus-success-100);
  --itkaarhus-warning:     var(--itkaarhus-warning-500);
  --itkaarhus-warning-soft:var(--itkaarhus-warning-100);
  --itkaarhus-danger:      var(--itkaarhus-danger-500);
  --itkaarhus-danger-soft: var(--itkaarhus-danger-100);

  /* ---- Surfaces & text -------------------------------------- */
  --itkaarhus-bg:          var(--itkaarhus-white);
  --itkaarhus-bg-muted:    var(--itkaarhus-gray-50);
  --itkaarhus-bg-inverse:  var(--itkaarhus-gray-900);

  /* ---- Type stack ------------------------------------------- */
  --itkaarhus-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --itkaarhus-font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Serif — opt-in for editorial/website surfaces (heroes, headings, KPI numbers). */
  --itkaarhus-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Mono — system default; the DS doesn't ship a monospace font. */
  --itkaarhus-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (modular, base 16) ------------------------ */
  --itkaarhus-text-xs:   12px;
  --itkaarhus-text-sm:   14px;
  --itkaarhus-text-base: 16px;
  --itkaarhus-text-md:   18px;
  --itkaarhus-text-lg:   22px;
  --itkaarhus-text-xl:   28px;
  --itkaarhus-text-2xl:  36px;
  --itkaarhus-text-3xl:  48px;
  --itkaarhus-text-4xl:  64px;
  --itkaarhus-text-5xl:  88px;

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

  /* ---- Radii ------------------------------------------------ */
  --itkaarhus-radius-0: 0;
  --itkaarhus-radius-1: 2px;
  --itkaarhus-radius-2: 6px;
  --itkaarhus-radius-3: 10px;
  --itkaarhus-radius-4: 16px;
  --itkaarhus-radius-pill: 999px;

  /* ---- Elevation -------------------------------------------- */
  --itkaarhus-shadow-1: 0 1px 2px rgba(17,19,24,0.06);
  --itkaarhus-shadow-2: 0 4px 10px -2px rgba(17,19,24,0.08), 0 2px 4px -1px rgba(17,19,24,0.04);
  --itkaarhus-shadow-3: 0 16px 32px -12px rgba(17,19,24,0.18), 0 4px 8px -2px rgba(17,19,24,0.06);

  /* ---- Focus ring ------------------------------------------- */
  --itkaarhus-focus: 0 0 0 3px rgba(0,123,166,0.35);

  /* ---- Layout ----------------------------------------------- */
  --itkaarhus-container: 1200px;
  --itkaarhus-gutter: 24px;

  /* ---- Breakpoints ------------------------------------------
     Reference values only — `var()` cannot be used in `@media`
     conditions, so the runtime queries hardcode 1023.98px / 767.98px.
     Update both places together if you change a breakpoint. */
  --itkaarhus-bp-md: 48rem; /* 768px  — drop user-menu name */
  --itkaarhus-bp-lg: 64rem; /* 1024px — collapse + share become icon-only */
}

/* Base reset-ish */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--itkaarhus-font-sans);
  color: var(--itkaarhus-gray-900);
  background: var(--itkaarhus-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11","ss01";
  line-height: 1.55;
}
a { color: var(--itkaarhus-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--itkaarhus-primary-hover); }