:root {
    /* Colors */
    --color-bg:             #ffffff;
    --color-fg:             #0A0A0A;
    --color-muted:          rgba(0, 0, 0, 0.45);
    --color-hero-bg:        #E2E2E0;
    --color-card-hover-bg:  #EAEAE8;
    --color-tag-bg:         rgba(0, 0, 0, 0.06);
    --color-border:         rgba(0, 0, 0, 0.10);
    --color-footer-bg:      #E1BBED;
    --color-footer-muted:   rgba(0, 0, 0, 0.45);
    --color-hero-overlay:   rgba(0, 0, 0, 0.44);
    --color-hero-surface:   rgba(255, 255, 255, 0.94);
    --color-hero-glass:     rgba(255, 255, 255, 0.18);
    --color-status-green:   #18D66B;
    --radius-hero:          clamp(1.75rem, 3.4vw, 3.125rem);

    /* Typography */
    --font-sans:  'Rethink Sans', sans-serif;
    --font-ui:    'Geist', sans-serif;
    --font-mono:  'Geist Mono', monospace;

    /* Z-index */
    --z-nav:   100;
    --z-menu:  200;

    /* Motion */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 180ms;
    --duration-med:  280ms;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    background-color: var(--color-bg);
    color: var(--color-fg);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    position: relative;
    top: -0.05em;
    flex-shrink: 0;
    overflow: visible;
    shape-rendering: geometricPrecision;
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}