/* ============================================================================
   LaDalat Design System — single source of truth for tokens + shared components.
   Linked by every page. Class names match what the app's JS already emits
   (btn-primary, pill, card, msg…), so pages adopt the system without JS changes.
   Fonts (Inter + Cabinet Grotesk) are loaded per-page via <link>, same as Explorer.
   ============================================================================ */

:root{
  /* ---- brand palette — "light · paper · glow" launch design ---- */
  --deep:#14261E; --forest:#1E3A2C; --green:#35604A; --moss:#2F7D4E;
  --moss-d:#1E5B38; --moss-l:#63B573;
  --orange:#D9822B; --ember:#B06A24; --gold:#EBB44C;
  --sand:#E8DCC4; --fog:#F4F0E6; --muted:#8A9484;
  --bg:#F2EDDF;                       /* app body ground — cream paper */
  --paper:#F2EDDF; --card:#FFFFFF; --brd:#E2D8C0; --ink:#17301F; --ink2:#2A6B43; --mut:#8A9484; --peach:#FCE8D2;
  --glass:#FFFFFF; --glass-brd:#E2D8C0;
  --glass-hi:rgba(23,48,31,.05);

  /* ---- Race Control desktop dashboard — same paper system as the rest of the product ---- */
  --rc-bg:#F2EDDF; --rc-panel:#FFFFFF; --rc-grid:#E2D8C0;
  --rc-warn:#EBB44C; --rc-alert:#B06A24;

  /* ---- semantic state (separate from the orange accent) ---- */
  --ok:#3E6B4C; --warn:#EBB44C; --alert:#B06A24; --danger:#C4432E;

  /* ---- one radius scale (replaces the 12-value sprawl) ---- */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  /* ---- spacing scale ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ---- elevation ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 4px 16px rgba(0,0,0,.35);
  --sh-3:0 12px 40px rgba(0,0,0,.5);

  /* ---- motion: communication, not decoration ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:.12s; --dur-2:.22s; --dur-3:.4s;

  /* ---- type ---- */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Cabinet Grotesk','Inter',system-ui,sans-serif;
}

*{-webkit-tap-highlight-color:transparent}

/* ---- typography helpers ---- */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============================================================================
   Buttons — one size system, one set of variants.
   ============================================================================ */
.btn,.btn-primary,.btn-ghost,.btn-danger{
  font:inherit;font-weight:650;font-size:15px;line-height:1;
  border:1px solid transparent;border-radius:var(--r-md);
  padding:13px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.btn-primary{background:var(--orange);color:#1a1005}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--glass-brd)}
.btn-ghost:hover{background:rgba(23,48,31,.05)}
.btn-danger{background:transparent;color:var(--alert);border-color:rgba(196,112,42,.45)}
.btn-danger:hover{background:rgba(196,112,42,.14)}
.btn:active,.btn-primary:active,.btn-ghost:active,.btn-danger:active{transform:translateY(1px)}
.btn-primary:disabled,.btn-ghost:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.btn-block{width:100%}
.btn-sm{padding:9px 13px;font-size:14px;border-radius:var(--r-sm)}
.btn-lg{padding:17px 22px;font-size:17px;border-radius:var(--r-lg)}

/* ============================================================================
   Cards, panels, surfaces
   ============================================================================ */
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);padding:var(--sp-5)}
.panel{background:var(--rc-panel);border:1px solid var(--rc-grid);border-radius:var(--r-lg);padding:var(--sp-6)}

/* ============================================================================
   Form fields — unified label + control
   ============================================================================ */
.field{display:block;margin-top:var(--sp-4)}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 var(--sp-2)}
input,select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:#F6F2E6;border:1px solid var(--glass-brd);border-radius:var(--r-md);
  padding:12px 13px;transition:outline-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink2);outline-offset:-1px;border-color:var(--ink2)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}

/* ============================================================================
   Pills / status chips — form encodes state, not just colour
   ============================================================================ */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-full);
  background:var(--glass);color:var(--muted);white-space:nowrap}
.pill.live,.pill.published{background:rgba(62,107,76,.14);color:var(--ink2)}
.pill.warn{background:rgba(235,180,76,.22);color:#8a6512}
.pill.alert{background:rgba(176,106,36,.16);color:var(--ember)}
.pill.finished,.pill.muted{background:var(--glass);color:var(--muted)}

/* ============================================================================
   Inline messages
   ============================================================================ */
.msg{border-radius:var(--r-md);padding:13px 16px;font-size:14px;line-height:1.5;margin-bottom:var(--sp-4)}
.msg.good{background:rgba(62,107,76,.12);border:1px solid var(--ink2);color:#1E3A2C}
.msg.bad{background:rgba(176,106,36,.12);border:1px solid var(--alert);color:#7a3e12}
.msg.warn{background:rgba(235,180,76,.18);border:1px solid var(--warn);color:#5a4210}

/* ============================================================================
   Empty states
   ============================================================================ */
.empty{text-align:center;padding:var(--sp-12) var(--sp-5);color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:var(--sp-2);font-weight:650}

/* ============================================================================
   Living surfaces — hover lift, progress-bar glow, live heartbeat.
   Cheap, broadly-applicable motion so cards/rows/bars don't sit flat.
   ============================================================================ */
.evrow,.rc-ev,.lbrow,.crewrow,.health,.kpi{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){
  .evrow:hover,.rc-ev:hover,.lbrow:hover:not(.sel){transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(23,48,31,.22)}
}
.bar i,.rc-prog .bar i,.twfill{position:relative;transition:width 1.1s cubic-bezier(.16,.8,.2,1)}
.bar i::after,.rc-prog .bar i::after{content:"";position:absolute;right:-1px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 72%);animation:dsheadpulse 2.2s ease-in-out infinite}
@keyframes dsheadpulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
.livedot,.rc-state .d,.pill.live i{animation:dspulse 1.8s infinite}
@keyframes dspulse{0%,100%{opacity:1}50%{opacity:.35}}
.rc-ev.live,.kpi.live{animation:dsheartbeat 3.6s ease-in-out infinite}
@keyframes dsheartbeat{0%,100%{box-shadow:0 10px 28px rgba(217,130,43,.14)}50%{box-shadow:0 14px 36px rgba(217,130,43,.28)}}
.rcd-tbl .flash,.rowflash{animation:dscellflash 1.1s ease-out}
@keyframes dscellflash{0%{background:rgba(217,130,43,.28)}100%{background:transparent}}

/* ============================================================================
   Accessibility / motion preferences
   ============================================================================ */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}