/* ==========================================
   LunarStar Spacing & Rhythm System
   No random margins. Every gap is a token.
   Merged: spacing.css + spacing-system.css
========================================== */

:root {
    /* 4pt Grid Space Tokens */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 72px;
    --space-13: 80px;
    --space-14: 96px;
    --space-15: 120px;
    --space-section: 140px;
    --container-width: 1320px;
    --content-width: 1180px;
}

/* === Unified Heading Margins === */
h1 { margin-bottom: var(--space-4); }
h2 { margin-bottom: var(--space-3); }
h3 { margin-bottom: var(--space-2); }
h4 { margin-bottom: var(--space-1); }
p  { margin-bottom: var(--space-2); }

/* === Content Width === */
.text-content  { max-width: 720px; margin-inline: auto; }
.content-sm    { max-width: 640px; }
.content-md    { max-width: 760px; }
.content-lg    { max-width: 980px; }

/* === Section Density === */
.section-compact  { padding-block: 80px; }
.section-normal   { padding-block: 120px; }
.section-large    { padding-block: 160px; }

/* === Section Heading Spacing === */
.section-heading {
    margin-bottom: 72px;
}

/* === Stack System (use gap, never margin) === */
.ls-stack {
    display: flex;
    flex-direction: column;
}
.ls-stack-xs { gap: var(--space-1); }  /* 8px */
.ls-stack-sm { gap: var(--space-2); }  /* 16px */
.ls-stack-md { gap: var(--space-3); }  /* 24px */
.ls-stack-lg { gap: var(--space-5); }  /* 48px */
.ls-stack-xl { gap: var(--space-6); }  /* 64px */

/* === Feature Grid === */
.feature-grid {
    display: grid;
    gap: 28px;
}

/* === Feature List === */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* === Button Group === */
.button-group {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* === Card Internal Rhythm === */
.card-icon   { margin-bottom: 20px; }
.card-title  { margin-bottom: 14px; }
.card-desc   { margin-bottom: 24px; }

/* === Unified Focus Ring === */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 176, 82, 0.25);
    border-radius: 4px;
}