/*
 * Forberedt design-tokens v16.0.0
 * Genereret fra tokens.json - rediger IKKE direkte. Opdater tokens.json og gen-byg.
 *
 * Single source of truth for farver, spacing, radius, typografi.
 * Bevarer v15 §1-7 (farver/font/ikoner) 1:1.
 *
 * Import i HTML-filer:
 *   <link rel="stylesheet" href="/docs/brandprofil/tokens.css">
 *
 * Brug i CSS:
 *   background: var(--color-teal);
 *   padding: var(--sp-3) var(--sp-4);
 *   border-radius: var(--radius-md);
 */

:root {
  /* === FARVER === (bevares 1:1 fra brandprofil v15 §3) */
  --color-navy: #1A2B3C;
  --color-teal: #2A7A6E;
  --color-amber: #E67E22;

  --color-text: #2C3E50;
  --color-text-muted: #6B6560;
  --color-text-dim: #9B9489;
  --color-text-on-dark: #FFFFFF;

  --color-body: #F5F0E8;
  --color-card: #FFFFFF;
  --color-border: #E2DDD6;

  --color-red: #C0392B;
  --color-red-pale: #FEF2F2;

  /* Forslag G boks-fyld (v15 §7) */
  --color-box-anbefaling: #2A7A6E;
  --color-box-information: #2C3E50;
  --color-box-advarsel: #C0392B;

  /* Ikon-serier (v15 §6) */
  --color-icon-a: #2A7A6E;
  --color-icon-b: #1A2B3C;
  --color-icon-c: #E67E22;

  /* === SPACING === (NY i v16 §14) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* === RADIUS === (NY i v16 §15) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 99px;

  /* === TYPOGRAFI === (bevares fra v15 §4, udvidet med skala i v16 §16) */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter Display', 'Inter', system-ui, sans-serif;

  --size-caption: 0.62rem;
  --size-small: 0.74rem;
  --size-hint: 0.78rem;
  --size-body: 0.88rem;
  --size-label: 0.92rem;
  --size-h3: 1.05rem;
  --size-h2: 1.3rem;
  --size-h1: 1.6rem;

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

  --lh-tight: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* === SHADOW === (NY i v16) */
  --shadow-sm: 0 1px 3px rgba(26,43,60,0.08);
  --shadow-md: 0 4px 12px rgba(26,43,60,0.12);
  --shadow-lg: 0 8px 24px rgba(26,43,60,0.16);

  /* === BORDER === */
  --border-thin: 1px solid #E2DDD6;
  --border-standard: 1.5px solid #E2DDD6;
  --border-thick: 2px solid #E2DDD6;
}

/*
 * === KOMPONENT-KLASSER ===
 * Direkte implementation af brandprofil v16 §8-13.
 * Importér tokens.css + brug disse klasser i stedet for ad-hoc-styling.
 */

/* §8 Knap-system */
.fb-btn {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  transition: filter .15s, background-color .15s, border-color .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.fb-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.fb-btn--cta-amber {
  background: var(--color-amber);
  color: var(--color-text-on-dark);
  padding: 10px var(--sp-6);
  font-size: var(--size-label);
}
.fb-btn--cta-amber:hover { filter: brightness(1.05); }

.fb-btn--cta-teal {
  background: var(--color-teal);
  color: var(--color-text-on-dark);
  padding: 8px 14px;
  font-size: var(--size-hint);
}
.fb-btn--cta-teal:hover { filter: brightness(1.05); }

.fb-btn--secondary {
  background: var(--color-card);
  color: var(--color-teal);
  border: var(--border-standard);
  border-color: var(--color-teal);
  padding: 8px 14px;
  font-size: var(--size-hint);
  font-weight: var(--weight-semibold);
}
.fb-btn--secondary:hover { background: var(--color-body); }

.fb-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: var(--border-standard);
  padding: 6px 14px;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
}
.fb-btn--ghost:hover { border-color: var(--color-teal); color: var(--color-teal); }

.fb-btn--destructive {
  background: var(--color-red);
  color: var(--color-text-on-dark);
  padding: 8px 14px;
  font-size: var(--size-hint);
}
.fb-btn--destructive:hover { filter: brightness(1.05); }

/* v16.x: Outline-varianter + neutral-rolle (NY) */

.fb-btn--cta-amber-outline {
  background: var(--color-card);
  color: var(--color-amber);
  border: 1.5px solid var(--color-amber);
  padding: 8.5px 22.5px;
  font-size: var(--size-label);
  font-weight: var(--weight-semibold);
}
.fb-btn--cta-amber-outline:hover { background: var(--color-amber); color: var(--color-text-on-dark); }

.fb-btn--neutral {
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  padding: 8px 14px;
  font-size: var(--size-hint);
  font-weight: var(--weight-bold);
}
.fb-btn--neutral:hover { filter: brightness(1.15); }

.fb-btn--neutral-outline {
  background: var(--color-card);
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
  padding: 6.5px 12.5px;
  font-size: var(--size-hint);
  font-weight: var(--weight-semibold);
}
.fb-btn--neutral-outline:hover { background: var(--color-navy); color: var(--color-text-on-dark); }

.fb-btn--destructive-outline {
  background: var(--color-card);
  color: var(--color-red);
  border: 1.5px solid var(--color-red);
  padding: 6.5px 12.5px;
  font-size: var(--size-hint);
  font-weight: var(--weight-semibold);
}
.fb-btn--destructive-outline:hover { background: var(--color-red); color: var(--color-text-on-dark); }

/* v16.x: Sekundær (teal outline) hover-konsistens - matcher de andre outline-varianter */
.fb-btn--secondary:hover { background: var(--color-teal); color: var(--color-text-on-dark); }

/* v16.x: Rejected-card knap-regel - knapper bevarer opacity 1 selv på afdæmpet kort */
.sf-card--rejected .fb-btn { opacity: 1; }

/* §9 Form-elementer */
.fb-input, .fb-select, .fb-textarea {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-card);
  border: var(--border-standard);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: border-color .15s;
}
.fb-input:focus, .fb-select:focus, .fb-textarea:focus {
  outline: none;
  border-color: var(--color-teal);
}

/* §10 Chips & badges */
.fb-chip {
  display: inline-block;
  padding: 6px var(--sp-3);
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  border: var(--border-standard);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text);
  font-size: var(--size-body);
  cursor: pointer;
  user-select: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.fb-chip[data-selected="1"], .fb-chip.is-selected {
  background: var(--color-teal);
  color: var(--color-text-on-dark);
  border-color: var(--color-teal);
}

.fb-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--size-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  vertical-align: middle;
  color: var(--color-text-on-dark);
}
.fb-badge--suggested { background: var(--color-amber); }
.fb-badge--confirmed { background: var(--color-teal); }
.fb-badge--edited    { background: var(--color-navy); }
.fb-badge--rejected  { background: var(--color-text-muted); }
.fb-badge--auto      { background: var(--color-navy); }

/* §7 v15 Bokse Forslag G (re-defineret som klasser) */
.fb-box {
  padding: 14px var(--sp-4);
  border-radius: var(--radius-md);
  color: var(--color-text-on-dark);
  line-height: var(--lh-relaxed);
  font-size: var(--size-body);
  position: relative;
}
.fb-box--anbefaling { background: var(--color-box-anbefaling); }
.fb-box--information { background: var(--color-box-information); }
.fb-box--advarsel { background: var(--color-box-advarsel); }
.fb-box__icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.fb-box--anbefaling .fb-box__icon,
.fb-box--information .fb-box__icon { color: var(--color-amber); }
.fb-box--advarsel .fb-box__icon { color: var(--color-text-on-dark); }