/* Material 3 Expressive — Calm Blue Sage (Light only) */
:root {
  /* Brand */
  --primary:#4F6D7A;            --on-primary:#FFFFFF;
  --primary-container:#C8D8DD;  --on-primary-container:#1E3238;

  --secondary:#8FB8A8;          --on-secondary:#FFFFFF;
  --secondary-container:#DDEBE4;--on-secondary-container:#243D33;

  --tertiary:#F2C97D;           --on-tertiary:#3B2D00;
  --tertiary-container:#FFF1CE; --on-tertiary-container:#2D1F00;

  /* Surfaces */
  --background:#FAFAFA;         --on-background:#212121;
  --surface:#FFFFFF;            --on-surface:#212121;
  --outline:#8A8A8A;

  /* Shape & elevation */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow:0 8px 20px rgba(0,0,0,.10); /* use this only */

  /* Spacing scale (4/8px grid) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;

  /* Type (Material-ish scale) */
  --font-sans: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(28px, 4.2vw, 50px);
  --fs-headline: clamp(22px, 3vw, 30px);
  --fs-title: 20px;
  --fs-body: 16px;
  --fs-label: 14px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-normal: 1.6;
}