/* Rams Design System tokens – kopieret fra Claude Design-projektet (MDT-panel). Redigér ikke her; opdatér fra designsystemet. */
/* ---- fonts.css ---- */
/* Webfonts.
   SUBSTITUTION: the Braun/Rams era used Akzidenz-Grotesk and later Helvetica.
   No licensed binaries were supplied with this brief, so the nearest neutral
   grotesques on Google Fonts stand in: Archivo (UI + display) and IBM Plex Mono
   (technical labels, numerals). Replace with real binaries when available. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---- colors.css ---- */
:root{
/* --- Neutral casing scale (Braun white/grey chassis) --- */
--white:#ffffff;
--paper:#f4f4f2;
--grey-050:#eeeeec;
--grey-100:#e6e6e3;
--grey-200:#d8d8d4;
--grey-300:#c2c2bd;
--grey-400:#a0a09b;
--grey-500:#7b7b76;
--grey-600:#575754;
--graphite:#3a3a38;
--ink:#1a1a18;
--black:#000000;

/* --- Functional accents. Reserved for buttons and functions only. --- */
--yellow:#f5c400;
--yellow-press:#d9ae00;
--orange:#e8600a;
--orange-press:#cc5207;
--red:#c8102e;
--red-press:#a70d26;
--green:#007a3d;
--green-press:#006533;
--blue:#0057a8;

/* --- Semantic text --- */
--text-primary:var(--ink);
--text-secondary:var(--grey-600);
--text-muted:var(--grey-400);
--text-inverse:var(--white);
--text-link:var(--ink);
--text-link-hover:var(--orange);

/* --- Semantic surfaces --- */
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-sunken:var(--grey-050);
--surface-raised:var(--white);
--surface-inverse:var(--ink);
--surface-hover:var(--grey-050);
--surface-press:var(--grey-100);
--surface-disabled:var(--grey-100);

/* --- Semantic lines --- */
--border-hairline:var(--grey-200);
--border-strong:var(--graphite);
--border-focus:var(--orange);

/* --- Signals (state, never decoration) --- */
--signal-attention:var(--yellow);
--signal-active:var(--orange);
--signal-danger:var(--red);
--signal-ok:var(--green);
--signal-info:var(--blue);

/* --- Controls --- */
--control-fill:var(--ink);
--control-fill-hover:var(--graphite);
--control-fill-press:var(--black);
--control-fill-quiet:transparent;
--control-on:var(--orange);
}
:root[data-theme="inverse"]{
--surface-page:var(--ink);
--surface-card:var(--graphite);
--surface-sunken:var(--black);
--surface-hover:#2a2a28;
--surface-press:#333330;
--text-primary:var(--white);
--text-secondary:var(--grey-300);
--text-muted:var(--grey-500);
--text-inverse:var(--ink);
--border-hairline:#4a4a47;
--border-strong:var(--grey-300);
--control-fill:var(--white);
}

/* ---- typography.css ---- */
:root{
--font-core:"Archivo","Helvetica Neue",Helvetica,"Akzidenz-Grotesk",Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

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

/* Type scale — 1.25 ratio, snapped to whole px */
--size-2xs:11px;
--size-xs:12px;
--size-sm:14px;
--size-md:16px;
--size-lg:20px;
--size-xl:25px;
--size-2xl:31px;
--size-3xl:39px;
--size-4xl:49px;
--size-5xl:61px;
--size-6xl:76px;

--leading-tight:1.04;
--leading-snug:1.18;
--leading-normal:1.5;
--leading-loose:1.65;

--tracking-display:-0.02em;
--tracking-normal:0;
--tracking-label:0.08em;
--tracking-caps:0.14em;

/* Semantic roles */
--text-display:var(--weight-medium) var(--size-6xl)/var(--leading-tight) var(--font-core);
--text-h1:var(--weight-medium) var(--size-4xl)/var(--leading-snug) var(--font-core);
--text-h2:var(--weight-medium) var(--size-2xl)/var(--leading-snug) var(--font-core);
--text-h3:var(--weight-medium) var(--size-xl)/var(--leading-snug) var(--font-core);
--text-body-lg:var(--weight-regular) var(--size-lg)/var(--leading-normal) var(--font-core);
--text-body:var(--weight-regular) var(--size-md)/var(--leading-normal) var(--font-core);
--text-body-sm:var(--weight-regular) var(--size-sm)/var(--leading-normal) var(--font-core);
--text-label:var(--weight-medium) var(--size-xs)/1.2 var(--font-mono);
--text-caption:var(--weight-regular) var(--size-xs)/var(--leading-normal) var(--font-core);
--text-numeral:var(--weight-medium) var(--size-sm)/1.1 var(--font-mono);
}

/* ---- spacing.css ---- */
:root{
/* 4px base unit. The grid is the honest structure of every layout. */
--unit:4px;
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

/* Layout */
--gutter:24px;
--gutter-wide:32px;
--page-pad:32px;
--page-pad-sm:20px;
--measure:66ch;
--measure-narrow:52ch;
--container:1200px;
--container-narrow:760px;
--control-h-sm:28px;
--control-h-md:36px;
--control-h-lg:44px;
--touch-min:44px;
}

/* ---- borders.css ---- */
:root{
--hairline:1px;
--line-medium:2px;
--line-heavy:4px;

/* Corners are square unless the object is a physical control. */
--radius-0:0px;
--radius-1:1px;
--radius-2:2px;
--radius-3:3px;
--radius-round:999px;

--border-thin:var(--hairline) solid var(--border-hairline);
--border-heavy:var(--line-medium) solid var(--border-strong);
--focus-ring:0 0 0 2px var(--surface-card),0 0 0 4px var(--border-focus);
}

/* ---- elevation.css ---- */
:root{
/* Shadow is a last resort. Hairlines carry hierarchy; shadow only where an
   object genuinely floats above the plane. */
--shadow-none:none;
--shadow-overlay:0 1px 2px rgba(26,26,24,.10),0 8px 24px rgba(26,26,24,.14);
--shadow-menu:0 1px 1px rgba(26,26,24,.08),0 4px 12px rgba(26,26,24,.10);
--scrim:rgba(26,26,24,.42);
--blur-scrim:blur(2px); /* @kind other */
}

/* ---- motion.css ---- */
:root{
/* Motion confirms an action. It never performs. No bounce, no overshoot. */
--dur-instant:80ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:260ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-linear:linear; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
}}

/* ---- base.css ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-body);text-wrap:pretty}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1{font:var(--text-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--text-h2)}
h3{font:var(--text-h3)}
a{color:var(--text-link);text-decoration:none;border-bottom:var(--hairline) solid var(--grey-300);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
img{display:block;max-width:100%}
hr{border:0;border-top:var(--border-thin);margin:0}
::selection{background:var(--yellow);color:var(--ink)}
.ds-label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.ds-measure{max-width:var(--measure)}