/* DarMuzical — Design tokens (locked, see docs/DESIGN-SYSTEM.md) */
:root {
  --bg: #FFFDFC;
  --surface: #FFFFFF;
  --text: #171717;
  --muted: #666666;
  --red: #D71920;
  --red-dark: #A40F16;
  --red-soft: #FFF1F1;
  --border: #EAE4DF;
  --gold: #F1B65A;
  --green: #4D7C43;
  --success-bg: #EAF8EE;
  --success: #238847;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --shadow-card: 0 10px 32px rgba(23,23,23,.07);
  --shadow-soft: 0 4px 18px rgba(23,23,23,.05);
  --content: 1200px;

  --font-ui: "Inter", "SF Pro Display", Arial, sans-serif;

  /* Type scale */
  --fs-hero: 64px;      --lh-hero: 67px;
  --fs-section: 36px;   --lh-section: 42px;
  --fs-body: 17px;      --lh-body: 27px;
  --fs-caption: 13px;   --lh-caption: 18px;

  /* Spacing */
  --section-gap: 112px;
  --container-pad: 24px;
  --card-gap: 24px;
  --card-pad: 32px;
}

@media (max-width: 768px) {
  :root {
    --fs-hero: 40px;    --lh-hero: 43px;
    --fs-section: 28px; --lh-section: 34px;
    --fs-body: 16px;    --lh-body: 25px;
    --section-gap: 72px;
    --container-pad: 18px;
    --card-gap: 20px;
    --card-pad: 28px;
  }
}