/* ==========================================================================
   ASI DEMOS - Base Styles (Reset, Typography, Containers)
   ========================================================================== */

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    background-color: var(--color-bg-primary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h1 {
    font-size: clamp(36px, 6vw, var(--text-5xl));
}

h2 {
    font-size: clamp(28px, 4vw, var(--text-4xl));
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-base);
}

p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast);
}

a:hover {
    color: var(--color-accent);
}

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Section */
.section {
    padding: var(--space-20) var(--space-6);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-header h2 {
    margin-bottom: var(--space-4);
}

.section-header p {
    max-width: 600px;
    margin: 0 auto;
}

/* System Labels */
.system-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}

.module-id {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    color: var(--color-accent);
    text-transform: uppercase;
}

/* Stroke Text Effect */
.stroke-text {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-void-40);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

/* Responsive */
@media (max-width: 768px) {
    .section {
        padding: var(--space-12) var(--space-4);
    }

    .container {
        padding: 0 var(--space-4);
    }
}