/* cache-bust 20260616-1000 redesign-bw-pink */
/* =============================================================================
   Truckwash Kassel — Design System v4 · MONO + PINK
   ----------------------------------------------------------------------------
   Direction (brief): black & white, high contrast, pink as the single accent.
   Black/white carries structure and weight; pink marks STATE and ACTION only
   (active nav, focus, primary buttons, accent edges) — never decoration.
   Loads after Bootstrap 5.3 (local /assets/vendor) so :root tokens + the
   component overrides below win. DB-driven tokens (Theme::cssVars) are injected
   AFTER this file and override the :root values here.
   Signature: a 3px pink edge-bar that appears on the active/elevated surface.
   ============================================================================= */

:root{
  /* ---- mono ramp (true black -> paper) ---- */
  --ink:#0A0A0B;          /* primary text / black surfaces */
  --ink-2:#2A2A30;        /* secondary text on paper */
  --muted:#6B6B76;        /* tertiary / captions on paper (AA) */
  --paper:#FFFFFF;
  --paper-2:#F5F5F7;      /* app background */
  --paper-3:#ECECEF;      /* insets / hover wash */
  --line:#E3E3E8;         /* hairlines */
  --line-2:#CBCBD4;       /* stronger dividers / inputs */

  /* ---- pink accent (the only chromatic colour) ---- */
  --pink:#E10A5A;         /* primary fill · white text AA */
  --pink-deep:#B80A4A;    /* hover/active fill · accent TEXT on white */
  --pink-text:#B80A4A;    /* pink text/links on white (AA) */
  --pink-bright:#FF2E78;  /* on-dark accents, focus glow on black */
  --pink-tint:#FFF0F5;    /* faint fill */
  --pink-tint2:#FFD6E6;   /* stronger tint / chips */

  /* ---- semantic ---- */
  --success:#157347; --danger:#C40010;

  /* ---- elevation: crisp, low-spread (mono wants edges not blur) ---- */
  --sh-1:0 1px 2px rgba(10,10,11,.06), 0 1px 1px rgba(10,10,11,.04);
  --sh-2:0 2px 8px rgba(10,10,11,.07), 0 8px 24px rgba(10,10,11,.06);
  --sh-3:0 18px 48px rgba(10,10,11,.16);
  --sh-pink:0 10px 28px rgba(225,10,90,.30);

  /* ---- radii ---- */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;

  /* ---- Bootstrap mapping ---- */
  --bs-body-bg:var(--paper-2);
  --bs-body-color:var(--ink);
  --bs-body-font-family:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-font-size:1rem; --bs-body-line-height:1.6;
  --bs-emphasis-color:var(--ink); --bs-heading-color:var(--ink);
  --bs-secondary-color:var(--muted); --bs-tertiary-color:var(--muted);
  --bs-border-color:var(--line); --bs-border-color-translucent:var(--line);
  --bs-primary:var(--pink); --bs-primary-rgb:225,10,90;
  --bs-link-color:var(--ink); --bs-link-color-rgb:10,10,11; --bs-link-hover-color:var(--pink-text);
  --bs-success:var(--success); --bs-success-rgb:21,115,71;
  --bs-danger:var(--danger); --bs-danger-rgb:196,0,16;
  --bs-warning:var(--pink); --bs-warning-rgb:225,10,90;
  --bs-table-border-color:var(--line);
  --bs-border-radius:var(--r-sm); --bs-border-radius-sm:6px; --bs-border-radius-lg:var(--r);
  --bs-border-radius-xl:var(--r-lg); --bs-border-radius-xxl:var(--r-xl); --bs-border-radius-pill:999px;
}

/* ---------- base + typography ---------- */
*,*::before,*::after{ -webkit-tap-highlight-color:transparent; }
body{
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--paper-2); color:var(--ink);
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{ color:var(--ink); font-weight:800; letter-spacing:-.02em; line-height:1.12; }
h1,.h1{ letter-spacing:-.035em; line-height:1.02; }
.display-4{ font-size:clamp(2.5rem,6vw,4.25rem); font-weight:850; letter-spacing:-.04em; }
.display-5{ font-size:clamp(2rem,5vw,3.25rem); font-weight:800; letter-spacing:-.035em; }
.display-6{ font-size:clamp(1.6rem,4vw,2.5rem); font-weight:800; letter-spacing:-.03em; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink-2); font-weight:400; line-height:1.55; }
p{ color:var(--ink-2); }
small,.small{ font-size:.825rem; }
.text-muted,.text-body-secondary,small.text-muted{ color:var(--muted)!important; }
strong,b{ font-weight:700; color:var(--ink); }
code,.mono,kbd{ font-family:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace; font-size:.9em; }
hr{ border:0; border-top:1px solid var(--line); opacity:1; margin:1.5rem 0; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--pink-text); }

/* ---------- eyebrow / section label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink-text);
}
.eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--pink); }

/* ---------- buttons ---------- */
.btn{ --bs-btn-font-weight:650; border-radius:var(--r-sm); letter-spacing:-.01em; transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  --bs-btn-bg:var(--pink); --bs-btn-border-color:var(--pink); --bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--pink-deep); --bs-btn-hover-border-color:var(--pink-deep); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--pink-deep); --bs-btn-active-border-color:var(--pink-deep);
  --bs-btn-disabled-bg:var(--pink-tint2); --bs-btn-disabled-border-color:var(--pink-tint2); --bs-btn-disabled-color:#fff;
  box-shadow:var(--sh-pink);
}
.btn-primary:hover{ box-shadow:0 14px 32px rgba(225,10,90,.38); }
.btn-dark{
  --bs-btn-bg:var(--ink); --bs-btn-border-color:var(--ink); --bs-btn-color:#fff;
  --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#000;
  --bs-btn-active-bg:#000; --bs-btn-active-border-color:#000;
}
.btn-outline-secondary{
  --bs-btn-color:var(--ink); --bs-btn-border-color:var(--line-2);
  --bs-btn-hover-bg:var(--ink); --bs-btn-hover-border-color:var(--ink); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink);
}
.btn-outline-primary{
  --bs-btn-color:var(--pink-text); --bs-btn-border-color:var(--pink);
  --bs-btn-hover-bg:var(--pink); --bs-btn-hover-border-color:var(--pink); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--pink-deep); --bs-btn-active-border-color:var(--pink-deep);
}
.btn-outline-danger{ --bs-btn-color:var(--danger); --bs-btn-border-color:var(--danger);
  --bs-btn-hover-bg:var(--danger); --bs-btn-hover-color:#fff; }
.btn-success{ --bs-btn-bg:var(--success); --bs-btn-border-color:var(--success);
  --bs-btn-hover-bg:#125f3b; --bs-btn-hover-border-color:#125f3b; }
.btn-light{ --bs-btn-bg:#fff; --bs-btn-border-color:var(--line-2); --bs-btn-color:var(--ink);
  --bs-btn-hover-bg:var(--paper-3); --bs-btn-hover-border-color:var(--line-2); --bs-btn-hover-color:var(--ink); }
.btn-outline-light{ --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.5);
  --bs-btn-hover-bg:#fff; --bs-btn-hover-color:var(--ink); }
.btn-lg{ padding:.7rem 1.4rem; font-size:1.05rem; border-radius:var(--r); }
.btn-sm{ border-radius:6px; }

/* ---------- cards & panels ---------- */
.card,.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.panel{ padding:1.4rem 1.5rem; margin-bottom:1.4rem; position:relative; overflow:hidden; }
.panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--pink); opacity:0; transition:opacity .2s ease;
}
.panel:hover::before{ opacity:1; }
.panel>h2:first-child,.panel>h1:first-child{ margin-top:0; }
.card-body{ padding:1.3rem 1.4rem; }

/* ---------- forms ---------- */
.form-control,.form-select{
  border:1.5px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink);
  background:var(--paper); transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color:var(--muted); opacity:.8; }
.form-control:focus,.form-select:focus{
  border-color:var(--pink); box-shadow:0 0 0 3px rgba(225,10,90,.18); outline:none;
}
.form-control-color{ padding:.2rem; width:3rem; }
.form-label{ font-weight:600; color:var(--ink-2); margin-bottom:.3rem; }
.form-text{ color:var(--muted); }
.form-check-input:checked{ background-color:var(--pink); border-color:var(--pink); }
.form-check-input:focus{ border-color:var(--pink); box-shadow:0 0 0 3px rgba(225,10,90,.18); }

/* ---------- tables ---------- */
.table{ --bs-table-bg:transparent; color:var(--ink); }
.table>thead th{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border-bottom:2px solid var(--line-2); padding:.7rem .75rem;
}
.table>tbody td{ padding:.7rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.table-sm>:not(caption)>*>*{ padding:.45rem .6rem; }
.table-secondary{ --bs-table-bg:var(--paper-3); color:var(--muted); }

/* ---------- badges ---------- */
.badge{ font-weight:650; letter-spacing:.01em; border-radius:6px; padding:.36em .6em; }
.text-bg-primary{ background:var(--pink)!important; color:#fff!important; }
.text-bg-dark{ background:var(--ink)!important; color:#fff!important; }
.text-bg-secondary{ background:var(--paper-3)!important; color:var(--ink-2)!important; }
.badge.rounded-pill{ border-radius:999px; }

/* ---------- navbar (public) ---------- */
.navbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.navbar .navbar-brand{ font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.navbar .nav-link{ font-weight:600; color:var(--ink-2); position:relative; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--ink); }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:-2px; height:2px; background:var(--pink);
}

/* ---------- hero ---------- */
.hero-bold{
  background:var(--ink); color:#fff; border-radius:var(--r-xl);
  padding:clamp(2rem,5vw,4rem); position:relative; overflow:hidden;
}
.hero-bold h1,.hero-bold .display-4,.hero-bold .display-5{ color:#fff; }
.hero-bold .lead{ color:rgba(255,255,255,.82); }
.hero-bold .eyebrow{ color:var(--pink-bright); }
.hero-bold .eyebrow::before{ background:var(--pink-bright); }
.hero-bold::after{
  content:""; position:absolute; right:-12%; top:-30%; width:46%; height:160%;
  background:radial-gradient(closest-side, rgba(225,10,90,.55), transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.hero-stats{ display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-stat{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:850; letter-spacing:-.03em; color:#fff; line-height:1; }
.hero-stat-l{ font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pink-bright); margin-top:.35rem; }

/* ---------- section tint ---------- */
.section-tint{ background:var(--paper); border-block:1px solid var(--line); }
.bg-dark{ background:var(--ink)!important; }
.bg-light{ background:var(--paper)!important; }
.bg-primary{ background:var(--pink)!important; }
.text-primary{ color:var(--pink-text)!important; }

/* ---------- focus visibility ---------- */
:focus-visible{ outline:2.5px solid var(--pink); outline-offset:2px; border-radius:3px; }
.btn:focus-visible{ outline:2.5px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 4px rgba(225,10,90,.25); }

/* ---------- skip link ---------- */
.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:1080;
  background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:var(--r-sm); font-weight:600;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}