/* Custom styles integrated with Tailwind */
:root {
    --bg-primary: #0D1B2A;
    --bg-secondary: #1B3A4B;
    --accent-primary: #4A90E2;
    --accent-secondary: #B7D8E6;
    --text-base: #E1E5EA;

    --space-unit: 1rem;
    --space-xs: calc(var(--space-unit) * 0.8125);
    --space-sm: calc(var(--space-unit) * 1.3125);
    --space-md: calc(var(--space-unit) * 2.125);
    --space-lg: calc(var(--space-unit) * 3.4375);

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-base);
    font-family: var(--font-body);
    font-size: var(--space-unit);
    line-height: 1.618;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--accent-primary);
}

h1 { font-size: var(--space-lg); }
h2 { font-size: var(--space-md); }

.subtitle {
    font-size: var(--space-sm);
    color: var(--accent-secondary);
}

.pentagon-visual {
    width: 233px;
    height: 221px;
    background-color: var(--bg-secondary);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.fibonacci-canvas {
    width: 100%;
    max-width: 377px;
    aspect-ratio: 1.618;
    margin: 0 auto;
}

.content-section p {
    margin-bottom: var(--space-sm);
}