/**
 * Seamx shared theme — copy this file to your client portal project
 * and link it before other stylesheets:
 *   <link rel="stylesheet" href="assets/css/seamx-theme.css">
 */
:root{
  /* Backgrounds — slightly dimmed off-white */
  --bg:#F3F3F3;
  --bg2:#EAEAEA;
  --surface:#FFFFFF;
  --surface2:#F7F7F7;
  --surface3:#E8E8E8;

  /* Borders */
  --border:rgba(0,0,0,0.1);
  --border2:rgba(0,0,0,0.18);

  /* Typography */
  --text:#111111;
  --text2:#444444;
  --text3:#5C5C5C;

  /* Accent */
  --accent:#111111;
  --accent2:#000000;
  --accent-soft:rgba(0,0,0,0.05);
  --accent-softer:rgba(0,0,0,0.025);
  --on-accent:#FFFFFF;

  /* Status */
  --green:#16A34A;
  --green-soft:rgba(22,163,74,0.1);
  --red:#DC2626;
  --red-soft:rgba(220,38,38,0.1);
  --orange:#EA580C;
  --orange-soft:rgba(234,88,12,0.1);
  --yellow:#CA8A04;
  --yellow-soft:rgba(202,138,4,0.1);
  --pink:#DB2777;
  --pink-soft:rgba(219,39,119,0.1);
  --blue:#2563EB;
  --blue-soft:rgba(37,99,235,0.1);

  /* Layout */
  --sidebar-w:72px;
  --sidebar-exp:240px;
  --topbar-h:64px;

  /* Radius */
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:5px;

  /* Typography */
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);

  /* Shadows */
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 14px rgba(0,0,0,0.05);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.1);
}

/* Skeleton shimmer — visible on light backgrounds */
.sk{
  background:linear-gradient(90deg,var(--surface3) 20%,#DCDCDC 50%,var(--surface3) 80%);
  background-size:200% 100%;
  animation:sksh 1.4s infinite;
  border-radius:var(--radius-sm);
}
@keyframes sksh{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}