/* =========================================================
   LIFTRIX Design Tokens
   Shared non-color design values for PC / Tablet / Mobile

   Role:
   - Radius
   - Shadows
   - Layout scale variables
   - Spacing
   - Typography scale
   - Control sizes
========================================================= */

:root{
  --radius-xs:10px;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:20px;
  --radius-pill:999px;

  --shadow:
    0 20px 48px rgba(5, 10, 20, 0.34),
    0 8px 20px rgba(10, 24, 52, 0.22);

  --shadow-soft:
    0 12px 28px rgba(5, 10, 20, 0.22),
    0 4px 12px rgba(10, 24, 52, 0.16);

  --shadow-card:
    0 10px 24px rgba(7, 18, 41, 0.18),
    0 4px 10px rgba(7, 18, 41, 0.10);

  --shadow-focus:
    0 0 0 3px rgba(63, 169, 255, 0.16);

  --sidebar-w:clamp(200px, 15vw, 230px);
  --sidebar-z:100;

  --page-gutter:clamp(12px, 1.8vw, 24px);
  --page-gutter-tight:clamp(8px, 1.2vw, 16px);

  --content-max:1200px;
  --content-wide:1440px;
  --content-full:none;

  --header-gap:clamp(8px, 1vw, 18px);
  --section-gap:clamp(12px, 1.2vw, 20px);
  --card-pad:clamp(12px, 1.2vw, 18px);

  --space-0:4px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;

  --title-size:clamp(20px, 1.5vw, 24px);
  --title-size-compact:clamp(18px, 1.3vw, 20px);

  --text-title:18px;
  --text-section:15px;
  --text-body:13px;
  --text-caption:12px;

  --font-weight-body:400;
  --font-weight-label:600;
  --font-weight-button:700;
  --font-weight-title:800;

  --control-h:40px;
  --control-radius:10px;
}

/* =========================================================
   Responsive Design Token Adjustments
========================================================= */

@media (min-width:1600px){
  :root{
    --content-max:1320px;
    --content-wide:1560px;
  }
}

@media (max-width:1280px){
  :root{
    --sidebar-w:clamp(190px, 15vw, 215px);
    --content-max:1160px;
  }
}