/* LABLIONS — colors & typography
 * Source: LABLIONS Design Manual 2024 V6 (CI/LABLIONS_Design_Manual_2024_V6.pdf)
 * Hausschrift: Albert Sans (Google Fonts) — local files in /fonts.
 */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ============== Brand colors (primary palette from manual) ============== */
  --ll-coral:        #ff906c; /* Koralle — primary brand colour */
  --ll-lion-brown:   #764a25; /* Löwenbraun — secondary, deep accent */
  --ll-sand:         #f9f8f4; /* Sandweiß — warm off-white background */
  --ll-black:        #000000; /* Schwarz */

  /* Coral tints/shades, derived for UI states.
     Manual approves: signet & coral surfaces; tints/shades are extrapolation
     for hover/press/focus states. Flag for sign-off. */
  --ll-coral-50:     #fff4ef;
  --ll-coral-100:    #ffe1d4;
  --ll-coral-200:    #ffc7b1;
  --ll-coral-300:    #ffa589;
  --ll-coral-400:    #ff906c; /* canonical */
  --ll-coral-500:    #f3744d;
  --ll-coral-600:    #db5a36;
  --ll-coral-700:    #b04528;

  /* Lion-brown ramp */
  --ll-brown-50:     #f5efe8;
  --ll-brown-100:    #e2d2bc;
  --ll-brown-300:    #b89366;
  --ll-brown-500:    #764a25; /* canonical */
  --ll-brown-700:    #4d2f15;
  --ll-brown-900:    #2a190a;

  /* Sand ramp — warm neutrals */
  --ll-sand-0:       #ffffff;
  --ll-sand-50:      #f9f8f4; /* canonical */
  --ll-sand-100:     #f1efe7;
  --ll-sand-200:     #e6e3d8;
  --ll-sand-300:     #cfcabb;
  --ll-sand-500:     #8c8878;
  --ll-sand-700:     #54513f;

  /* Semantic / functional (extrapolated, harmonised against the warm palette) */
  --ll-success:      #2f7a52;
  --ll-warning:      #c98a16;
  --ll-danger:       #b03028;
  --ll-info:         #2d5e8f;

  /* ============== Foreground / background tokens ============== */
  --ll-bg:           var(--ll-sand-50);     /* page background */
  --ll-bg-elevated:  var(--ll-sand-0);      /* card / surface */
  --ll-bg-inverse:   var(--ll-black);
  --ll-bg-brand:     var(--ll-coral);

  --ll-fg-1:         var(--ll-black);       /* primary text */
  --ll-fg-2:         var(--ll-brown-700);   /* secondary text */
  --ll-fg-3:         var(--ll-sand-700);    /* tertiary / muted */
  --ll-fg-on-brand:  var(--ll-black);       /* on coral — black is correct per manual */
  --ll-fg-on-dark:   var(--ll-sand-50);
  --ll-fg-on-brown:  var(--ll-sand-50);

  --ll-link:         var(--ll-coral-600);
  --ll-link-hover:   var(--ll-coral-700);

  --ll-border:       var(--ll-sand-200);
  --ll-border-strong:var(--ll-sand-300);
  --ll-divider:      var(--ll-sand-100);

  /* ============== Typography ============== */
  --ll-font-sans:    "Albert Sans", "Arial", system-ui, sans-serif;
  --ll-font-office:  "Arial", "Helvetica", sans-serif; /* manual: Office fallback */
  --ll-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights mirror what the manual lists */
  --ll-w-light:      300;
  --ll-w-regular:    400;
  --ll-w-medium:     500; /* Fließtext */
  --ll-w-semibold:   600;
  --ll-w-bold:       700; /* H2, emphasis, CTA */
  --ll-w-extrabold:  800;
  --ll-w-black:      900; /* H1 */

  /* Type scale — tuned for marketing/web. Headlines lean BIG. */
  --ll-fs-display:   clamp(56px, 8vw, 120px);
  --ll-fs-h1:        clamp(40px, 5vw, 72px);
  --ll-fs-h2:        clamp(28px, 3vw, 44px);
  --ll-fs-h3:        24px;
  --ll-fs-h4:        20px;
  --ll-fs-body:      17px;
  --ll-fs-body-sm:   15px;
  --ll-fs-caption:   13px;
  --ll-fs-eyebrow:   13px;

  --ll-lh-tight:     1.02;   /* H1, big display, set tight per template look */
  --ll-lh-snug:      1.15;
  --ll-lh-normal:    1.45;
  --ll-lh-loose:     1.6;

  --ll-tr-tight:     -0.02em;
  --ll-tr-normal:    0;
  --ll-tr-eyebrow:   0.08em; /* eyebrow / topline tracking */

  /* ============== Spacing ============== */
  --ll-space-0:      0;
  --ll-space-1:      4px;
  --ll-space-2:      8px;
  --ll-space-3:      12px;
  --ll-space-4:      16px;
  --ll-space-5:      24px;
  --ll-space-6:      32px;
  --ll-space-7:      48px;
  --ll-space-8:      64px;
  --ll-space-9:      96px;
  --ll-space-10:     128px;

  /* ============== Radii ============== */
  /* Brand vibe is rounded — wordmark uses generous curves. Lean medium-large. */
  --ll-radius-xs:    4px;
  --ll-radius-sm:    8px;
  --ll-radius-md:    14px;
  --ll-radius-lg:    20px;
  --ll-radius-xl:    28px;
  --ll-radius-2xl:   40px;
  --ll-radius-pill:  999px;

  /* ============== Shadows / elevation ============== */
  --ll-shadow-sm:    0 1px 2px rgba(31, 22, 12, 0.06), 0 1px 1px rgba(31, 22, 12, 0.04);
  --ll-shadow-md:    0 4px 14px rgba(31, 22, 12, 0.08), 0 1px 2px rgba(31, 22, 12, 0.04);
  --ll-shadow-lg:    0 14px 40px rgba(31, 22, 12, 0.10), 0 2px 6px rgba(31, 22, 12, 0.05);
  --ll-shadow-coral: 0 12px 28px rgba(255, 144, 108, 0.35);

  /* ============== Motion ============== */
  --ll-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ll-ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ll-dur-fast:      120ms;
  --ll-dur-base:      220ms;
  --ll-dur-slow:      420ms;
}

/* ============================================================
 * Semantic tags
 * ============================================================ */
html, body {
  font-family: var(--ll-font-sans);
  font-size: var(--ll-fs-body);
  line-height: var(--ll-lh-normal);
  color: var(--ll-fg-1);
  background: var(--ll-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .ll-h1 {
  font-family: var(--ll-font-sans);
  font-weight: var(--ll-w-black);
  font-size: var(--ll-fs-h1);
  line-height: var(--ll-lh-tight);
  letter-spacing: var(--ll-tr-tight);
  text-transform: uppercase; /* per manual: H1 in Versalien */
  margin: 0;
}

h2, .ll-h2 {
  font-family: var(--ll-font-sans);
  font-weight: var(--ll-w-bold);
  font-size: var(--ll-fs-h2);
  line-height: var(--ll-lh-snug);
  letter-spacing: var(--ll-tr-tight);
  margin: 0;
}

h3, .ll-h3 {
  font-family: var(--ll-font-sans);
  font-weight: var(--ll-w-bold);
  font-size: var(--ll-fs-h3);
  line-height: var(--ll-lh-snug);
  margin: 0;
}

h4, .ll-h4 {
  font-family: var(--ll-font-sans);
  font-weight: var(--ll-w-semibold);
  font-size: var(--ll-fs-h4);
  line-height: var(--ll-lh-snug);
  margin: 0;
}

p, .ll-body {
  font-weight: var(--ll-w-medium); /* Fließtext = Medium per manual */
  font-size: var(--ll-fs-body);
  line-height: var(--ll-lh-normal);
  margin: 0;
}

.ll-eyebrow,
.ll-topline {
  font-weight: var(--ll-w-bold);
  font-size: var(--ll-fs-eyebrow);
  letter-spacing: var(--ll-tr-eyebrow);
  text-transform: uppercase;
  color: var(--ll-fg-2);
}

.ll-display {
  font-weight: var(--ll-w-black);
  font-size: var(--ll-fs-display);
  line-height: var(--ll-lh-tight);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

strong, b, .ll-emphasis {
  font-weight: var(--ll-w-bold);
}

a {
  color: var(--ll-link);
  text-decoration-color: color-mix(in oklab, var(--ll-link) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--ll-dur-fast) var(--ll-ease-standard);
}
a:hover { color: var(--ll-link-hover); }

code, pre, kbd {
  font-family: var(--ll-font-mono);
  font-size: 0.94em;
}

::selection {
  background: var(--ll-coral);
  color: var(--ll-black);
}

/* ============================================================
 * LABLIONS UI Components — Intranet
 * ============================================================ */

/* ── Page header ── */
.ll-page-header { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ll-page-title { font-size: 32px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; margin: 0 0 4px; color: var(--ll-fg-1); }
.ll-page-sub { font-size: 13px; font-weight: 500; color: var(--ll-fg-3); margin: 0; }

/* ── Card ── */
.ll-card {
  background: #fff;
  border: 1px solid var(--ll-sand-200);
  border-radius: var(--ll-radius-lg);
  box-shadow: var(--ll-shadow-sm);
  padding: 24px;
}
.ll-card-sm { padding: 16px; }
.ll-card-lg { padding: 32px; }
.ll-card-title { font-size: 15px; font-weight: 700; color: var(--ll-fg-1); margin: 0 0 16px; }
.ll-card-sub { font-size: 12px; color: var(--ll-fg-3); font-weight: 500; margin: -10px 0 16px; }

/* ── Section label / eyebrow ── */
.ll-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ll-fg-3);
  display: block;
  margin-bottom: 4px;
}

/* ── Buttons ── */
.ll-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--ll-radius-pill);
  font-family: var(--ll-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--ll-dur-fast) var(--ll-ease-standard),
              color var(--ll-dur-fast) var(--ll-ease-standard),
              transform var(--ll-dur-fast) var(--ll-ease-standard);
  white-space: nowrap;
  line-height: 1;
}
.ll-btn i, .ll-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ll-btn-sm { padding: 6px 13px; font-size: 12px; }

.ll-btn-primary { background: var(--ll-coral); color: #000; }
.ll-btn-primary:hover { background: var(--ll-coral-500); color: #000; }
.ll-btn-primary:active { background: var(--ll-coral-600); transform: scale(0.985); }

.ll-btn-secondary { background: transparent; color: var(--ll-fg-1); border: 1.5px solid var(--ll-sand-300); }
.ll-btn-secondary:hover { background: var(--ll-sand-100); color: var(--ll-fg-1); }
.ll-btn-secondary:active { background: var(--ll-sand-200); transform: scale(0.985); }

.ll-btn-ghost { background: transparent; color: var(--ll-fg-2); border: none; padding-left: 0; padding-right: 0; }
.ll-btn-ghost:hover { color: var(--ll-fg-1); }

.ll-btn-danger { background: transparent; color: var(--ll-danger); border: 1.5px solid rgba(176,48,40,0.3); }
.ll-btn-danger:hover { background: rgba(176,48,40,0.06); color: var(--ll-danger); }

/* ── Chips / Badges ── */
.ll-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--ll-radius-pill);
  white-space: nowrap;
}
.ll-chip .ll-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.ll-chip-sand    { background: var(--ll-sand-100); color: var(--ll-sand-700); border: 1px solid var(--ll-sand-200); }
.ll-chip-coral   { background: var(--ll-coral-50); color: var(--ll-coral-700); border: 1px solid var(--ll-coral-200); }
.ll-chip-brown   { background: var(--ll-brown-50); color: var(--ll-brown-700); border: 1px solid var(--ll-brown-100); }
.ll-chip-success { background: rgba(47,122,82,0.1); color: var(--ll-success); border: 1px solid rgba(47,122,82,0.25); }
.ll-chip-warning { background: rgba(201,138,22,0.1); color: var(--ll-warning); border: 1px solid rgba(201,138,22,0.25); }
.ll-chip-danger  { background: rgba(176,48,40,0.08); color: var(--ll-danger); border: 1px solid rgba(176,48,40,0.2); }
.ll-chip-info    { background: rgba(45,94,143,0.08); color: var(--ll-info); border: 1px solid rgba(45,94,143,0.2); }

/* ── Form inputs ── */
.ll-input {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--ll-sand-200);
  border-radius: var(--ll-radius-md);
  font-size: 13.5px;
  font-family: var(--ll-font-sans);
  color: var(--ll-fg-1);
  transition: border-color var(--ll-dur-fast), outline var(--ll-dur-fast);
  box-sizing: border-box;
  font-weight: 500;
}
.ll-input:focus {
  outline: 2px solid var(--ll-coral);
  outline-offset: 1px;
  border-color: var(--ll-coral);
}
.ll-input-readonly {
  background: var(--ll-sand-50);
  border: 1px solid var(--ll-sand-200);
  border-radius: var(--ll-radius-md);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--ll-font-sans);
  color: var(--ll-fg-1);
  font-weight: 500;
}
textarea.ll-input { resize: vertical; }
.ll-input-hint { font-size: 12px; color: var(--ll-fg-3); margin-top: 4px; font-weight: 500; }
.ll-form-group { display: flex; flex-direction: column; gap: 5px; }

/* ── Avatar sizes ── */
.ll-av-xl { width: 96px; height: 96px; font-size: 32px; font-weight: 800; }
.ll-av-lg { width: 64px; height: 64px; font-size: 22px; font-weight: 800; }
.ll-av-md { width: 44px; height: 44px; font-size: 15px; font-weight: 800; }

/* ── Tag input (hobbies) ── */
.ll-tag-wrap {
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--ll-sand-200);
  border-radius: var(--ll-radius-md);
  cursor: text;
  background: #fff;
  align-items: center;
  transition: border-color var(--ll-dur-fast);
}
.ll-tag-wrap:focus-within {
  outline: 2px solid var(--ll-coral);
  outline-offset: 1px;
  border-color: var(--ll-coral);
}
.ll-tag-wrap input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ll-font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ll-fg-1);
}

/* ── File upload ── */
.ll-file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--ll-sand-100);
  border: 1px solid var(--ll-sand-300);
  border-radius: var(--ll-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ll-fg-2);
  cursor: pointer;
  font-family: var(--ll-font-sans);
  transition: background var(--ll-dur-fast);
}
.ll-file-trigger:hover { background: var(--ll-sand-200); }

/* ── Skill bars ── */
.ll-bar { display: flex; gap: 3px; align-items: center; }
.ll-bar-pip { width: 16px; height: 8px; border-radius: var(--ll-radius-xs); background: var(--ll-sand-200); }
.ll-bar-pip.on { background: var(--ll-coral); }

/* ── Section divider rows (inspector style) ── */
.ll-rows { border-radius: var(--ll-radius-md); overflow: hidden; }
.ll-row-item { display: grid; grid-template-columns: 130px 1fr; padding: 10px 0; border-bottom: 1px solid var(--ll-sand-100); font-size: 13.5px; gap: 12px; }
.ll-row-item:last-child { border-bottom: none; }
.ll-row-k { color: var(--ll-fg-3); font-weight: 600; }
.ll-row-v { color: var(--ll-fg-1); font-weight: 600; }

/* ── Tables ── */
.ll-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--ll-radius-lg);
  border: 1px solid var(--ll-sand-200);
  overflow: hidden;
  box-shadow: var(--ll-shadow-sm);
}
.ll-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ll-fg-3);
  background: var(--ll-sand-50);
  text-align: left;
  border-bottom: 1px solid var(--ll-sand-200);
}
.ll-table td { padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--ll-sand-100); color: var(--ll-fg-1); vertical-align: middle; }
.ll-table tbody tr:last-child td { border-bottom: none; }
.ll-table tbody tr:hover td { background: var(--ll-sand-50); }

/* ── Modal ── */
.ll-modal-wrap { display: none; position: fixed; inset: 0; z-index: 50; }
.ll-modal-wrap.open { display: flex; align-items: center; justify-content: center; padding: 16px; }
.ll-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.45); }
.ll-modal-box { position: relative; background: #fff; border-radius: var(--ll-radius-xl); box-shadow: var(--ll-shadow-lg); max-width: 420px; width: 100%; padding: 28px; z-index: 1; }
.ll-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.ll-modal-body { font-size: 14px; color: var(--ll-fg-2); margin: 0 0 24px; line-height: 1.5; font-weight: 500; }
.ll-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Alert / notice banner ── */
.ll-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--ll-radius-lg); margin-bottom: 20px; }
.ll-notice i, .ll-notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.ll-notice-coral  { background: rgba(255,144,108,0.08); border: 1px solid rgba(255,144,108,0.3); color: var(--ll-brown-700); }
.ll-notice-success{ background: rgba(47,122,82,0.08); border: 1px solid rgba(47,122,82,0.25); color: var(--ll-success); }
.ll-notice-warning{ background: rgba(201,138,22,0.08); border: 1px solid rgba(201,138,22,0.25); color: var(--ll-warning); }

/* ── Quick-access grid cards ── */
.ll-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid var(--ll-sand-200);
  border-radius: var(--ll-radius-lg);
  box-shadow: var(--ll-shadow-sm);
  text-decoration: none;
  color: var(--ll-fg-1);
  transition: box-shadow var(--ll-dur-fast), background var(--ll-dur-fast);
  text-align: center;
}
.ll-quick-card:hover { background: var(--ll-sand-50); box-shadow: var(--ll-shadow-md); color: var(--ll-fg-1); }
.ll-quick-card-name { font-size: 13.5px; font-weight: 700; }
.ll-quick-card-sub  { font-size: 12px; color: var(--ll-fg-3); font-weight: 500; }

/* ── Stat tile ── */
.ll-stat-card { display: flex; align-items: center; gap: 14px; }
.ll-stat-icon { width: 40px; height: 40px; border-radius: var(--ll-radius-md); background: var(--ll-sand-100); display: grid; place-items: center; flex-shrink: 0; }
.ll-stat-icon i, .ll-stat-icon svg { width: 20px; height: 20px; color: var(--ll-coral); }
.ll-stat-num { font-size: 24px; font-weight: 900; color: var(--ll-fg-1); line-height: 1; }
.ll-stat-label { font-size: 12.5px; color: var(--ll-fg-3); font-weight: 500; margin-top: 2px; }

/* ── Tailwind blue → LABLIONS coral overrides ── */
.bg-blue-50  { background-color: var(--ll-coral-50)  !important; }
.bg-blue-100 { background-color: var(--ll-coral-100) !important; }
.bg-blue-500 { background-color: var(--ll-coral)     !important; }
.bg-blue-600 { background-color: var(--ll-coral)     !important; }
.bg-blue-700 { background-color: var(--ll-coral-500) !important; }
.text-blue-500 { color: var(--ll-coral-500) !important; }
.text-blue-600 { color: var(--ll-coral-600) !important; }
.text-blue-700 { color: var(--ll-coral-700) !important; }
.text-blue-800 { color: var(--ll-brown-700) !important; }
.border-blue-500 { border-color: var(--ll-coral-500) !important; }
.hover\:bg-blue-50:hover  { background-color: var(--ll-sand-50)   !important; }
.hover\:bg-blue-100:hover { background-color: var(--ll-coral-50)  !important; }
.hover\:bg-blue-700:hover { background-color: var(--ll-coral-500) !important; }
.hover\:text-blue-700:hover { color: var(--ll-coral-700) !important; }
.hover\:text-blue-800:hover { color: var(--ll-brown-700) !important; }
.focus\:ring-blue-500:focus { outline: 2px solid var(--ll-coral) !important; box-shadow: none !important; }
.text-blue-600.hover\:underline:hover { color: var(--ll-coral-600) !important; }

/* text-white on coral buttons → black per manual */
.bg-blue-600, .bg-blue-600.text-white { color: #000 !important; }
.bg-blue-600 .text-white { color: #000 !important; }
.bg-blue-700 { color: #000 !important; }

/* green → ll-success */
.bg-green-500  { background-color: var(--ll-success) !important; }
.bg-green-600  { background-color: var(--ll-success) !important; }
.bg-green-50   { background-color: rgba(47,122,82,0.08) !important; }
.bg-green-100  { background-color: rgba(47,122,82,0.12) !important; }
.text-green-500 { color: var(--ll-success) !important; }
.text-green-600 { color: var(--ll-success) !important; }
.text-green-700 { color: var(--ll-success) !important; }
.text-green-800 { color: var(--ll-success) !important; }
.border-green-200 { border-color: rgba(47,122,82,0.25) !important; }
.hover\:bg-green-700:hover { background-color: #266644 !important; }

/* yellow/warning */
.bg-yellow-500 { background-color: var(--ll-warning) !important; }
.bg-yellow-50  { background-color: rgba(201,138,22,0.08) !important; }
.bg-yellow-100 { background-color: rgba(201,138,22,0.12) !important; }
.text-yellow-500 { color: var(--ll-warning) !important; }
.text-yellow-800 { color: var(--ll-warning) !important; }
.border-yellow-200 { border-color: rgba(201,138,22,0.25) !important; }

/* red → danger */
.bg-red-500  { background-color: var(--ll-danger) !important; }
.bg-red-600  { background-color: var(--ll-danger) !important; }
.bg-red-50   { background-color: rgba(176,48,40,0.06) !important; }
.bg-red-100  { background-color: rgba(176,48,40,0.1)  !important; }
.text-red-500 { color: var(--ll-danger) !important; }
.text-red-600 { color: var(--ll-danger) !important; }
.text-red-800 { color: var(--ll-danger) !important; }
.text-red-900 { color: var(--ll-danger) !important; }
.border-red-300 { border-color: rgba(176,48,40,0.3) !important; }
.hover\:bg-red-50:hover  { background-color: rgba(176,48,40,0.06) !important; }
.hover\:bg-red-700:hover { background-color: #8a241e !important; }
.hover\:text-red-500:hover { color: var(--ll-danger) !important; }
.hover\:text-red-900:hover { color: var(--ll-danger) !important; }

/* gray → sand */
.bg-gray-300 { background-color: var(--ll-sand-300) !important; }
.bg-gray-400 { background-color: var(--ll-sand-500) !important; }
.text-gray-300 { color: var(--ll-sand-300) !important; }
.text-gray-400 { color: var(--ll-fg-3) !important; }
.hover\:bg-gray-50:hover  { background-color: var(--ll-sand-50)  !important; }
.hover\:bg-gray-400:hover { background-color: var(--ll-sand-500) !important; }