/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  /* ---- Layout ---- */
  --site-max: 1620px;
  --gutter: 16px;
  --content-max: 1200px;
  --reading-max: 720px;

  /* ---- Colors ---- */
  --bg: #000000;
  --panel: #101419;
  --edge: #000000;
  --text: #e8eef6;
  --muted: #9aa4b2;
  --blue: #0D74F5;
  --green: #59E00B;

  --cas-black: #000;
  --cas-surface: #05070a;
  --cas-surface-2: #0f151d;
  --cas-line: #1b2430;
  --cas-silver-border: rgba(255,255,255,.6);
  --cas-card-shadow: 0 18px 40px rgba(0,0,0,.45);
  --cas-gradient-border:
    linear-gradient(180deg, #101419, #0f151d) padding-box,
    linear-gradient(135deg, var(--blue), #e7f1ff, var(--green), #f2ffe6, var(--blue)) border-box;

  /* ---- Responsive spacing scale ---- */
  --space-xs:  clamp(4px,  0.5vw,  8px);
  --space-sm:  clamp(8px,  1vw,   12px);
  --space-md:  clamp(12px, 1.5vw, 20px);
  --space-lg:  clamp(20px, 2.5vw, 32px);
  --space-xl:  clamp(32px, 4vw,   48px);
  --space-2xl: clamp(48px, 5.5vw, 72px);
  --space-3xl: clamp(64px, 7vw,   96px);

  /* ---- Fluid typography scale ---- */
  --text-xs:  clamp(12px, 0.8vw,  13px);
  --text-sm:  clamp(13px, 0.9vw,  14px);
  --text-base: clamp(14px, 1vw,   16px);
  --text-md:  clamp(15px, 1.1vw,  17px);
  --text-lg:  clamp(16px, 1.3vw,  20px);
  --text-xl:  clamp(18px, 1.6vw,  24px);
  --text-2xl: clamp(22px, 2.2vw,  30px);
  --text-3xl: clamp(26px, 3vw,    38px);
  --text-4xl: clamp(32px, 4vw,    52px);
  --text-5xl: clamp(36px, 5vw,    64px);

  /* ---- Touch & interaction ---- */
  --touch-min: 44px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-full: 9999px;
}
body{
  font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: #000;
}