/* Design tokens: spacing, colors, typography */
:root {
    /* Colors */
    --color-bg-1: #000000;         /* black */
    --color-bg-2: #1C1C1E;         /* darker gray */
    --color-text: #FFFFFF;         /* white */
    --color-text-secondary: #8d8d93; /* secondary text gray */
    --color-primary: #F9A005;      /* primary brand orange */
    --color-border: #2A2A2C;       /* subtle borders */
    --color-card: #0e0e10;         /* card bg */

    /* Spacing scale (4px base, curated steps) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 64px; /* Doubled from 32px for narrow layout side padding */
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 112px;
    --space-14: 128px;
    --space-15: 160px;
    --space-16: 192px;
    --space-17: 224px;
    --space-18: 256px;
    --space-19: 320px;
    --space-20: 400px;
    --radius-1: 6px;
    --radius-2: 10px;
    --radius-3: 14px;

    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-12: 12px;
    --font-size-13: 13px; /* small */
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-40: 40px;
    --line-tight: 1.2;
    --line-normal: 1.5;

    /* Heading pair spacing (title + subheader) */
    --heading-gap-pair: clamp(10px, 1.8vw, 24px);
    --heading-gap-after: calc(var(--heading-gap-pair) * 2);
}

/* Mobile spacing overrides - double the spacing for better mobile UX */
@media (max-width: 767px) {
    :root {
        /* Reduced section padding on mobile */
        --space-11: 40px; /* reduced from 160px */
        
        /* Double heading gaps on mobile */
        --heading-gap-pair: clamp(20px, 3.6vw, 48px); /* was 10-24px */
        --heading-gap-after: calc(var(--heading-gap-pair) * 2); /* was 20-48px */
        
        /* Keep scale tokens; container padding will multiply this by 4 below */
        --space-7: 48px; /* baseline side padding unit for mobile */
        
        /* Double stack spacing on mobile */
        --space-2: 16px; /* was 8px */
        --space-3: 24px; /* was 12px */
        --space-4: 32px; /* was 16px */
        --space-6: 48px; /* was 24px */
    }

    /* Increase container L/R padding by 4x on mobile */
    .container { padding-left: calc(var(--space-7) * 4); padding-right: calc(var(--space-7) * 4); }
}

/* Typography utilities */
.text-body { font-size: var(--font-size-20); line-height: var(--line-normal); color: var(--color-text-secondary); }
.text-strong { color: var(--color-text); }
.text-h1 { font-size: clamp(28px, 6vw, 56px); line-height: var(--line-tight); font-weight: 700; }
.text-h2 { font-size: clamp(22px, 4.5vw, 36px); line-height: var(--line-tight); font-weight: 700; }
.text-h3 { font-size: clamp(18px, 3.5vw, 24px); line-height: var(--line-tight); font-weight: 600; }
/* Small text utility (re-assigned former default) */
.text-small { font-size: var(--font-size-13); line-height: var(--line-normal); color: var(--color-text-secondary); }

/* Global media defaults: maintain aspect ratio and avoid squishing */
img, svg, video {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* Layout helpers */
.container { max-width: 1200px; margin: 0 auto; padding-left: var(--space-7); padding-right: var(--space-7); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-7 > * + * { margin-top: var(--space-7); }

/* Gray styleguide (basic) */
.styleguide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}
.style-swatch { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: var(--space-4); color: var(--color-text-secondary); }
.style-swatch.primary { background: var(--color-primary); color: #000; }
.style-swatch.bg1 { background: var(--color-bg-1); }
.style-swatch.bg2 { background: var(--color-bg-2); }