/* SHIPLN — custom.css | Branding and Base UI Tokens */

/* Swiss Design Utility Overrides */
:root {
    --color-bg-primary: #FFFFFF;
    --color-bg-alt: #F7F7F5;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #5A5A5A;
    --color-text-tertiary: #9A9A9A;
    --color-gold: #FFAB00;
    --color-border: #E8E8E4;
    --radius-swiss: 2px;
}

/* Material Symbols - Minimalist Data Style */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* KIAN Swiss Button Implementation */
.btn-swiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-swiss);
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: 'Public Sans', sans-serif;
}

.btn-black {
    background-color: var(--color-text-primary);
    color: #FFFFFF;
}

.btn-black:hover {
    background-color: var(--color-text-secondary);
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-text-primary);
}

.btn-gold:hover {
    filter: brightness(1.1);
}

/* Component Overrides for Dynamic Elements */
.aspect-4-3 { aspect-ratio: 4/3; border-radius: var(--radius-swiss); }
.aspect-3-4 { aspect-ratio: 3/4; border-radius: var(--radius-swiss); }
.aspect-16-5 { aspect-ratio: 16/5; border-radius: var(--radius-swiss); }

.border-all { border: 1px solid var(--color-border); border-radius: var(--radius-swiss); }


/* Animations from Stitch Exports */
@keyframes slide-dark-container {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.footer-texture {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 24px 24px;
    animation: slide-dark-container 120s linear infinite;
}

/* Typography Overrides */
.text-headline { font-family: 'Space Grotesk', sans-serif; }
.tracking-kinetic { letter-spacing: 0.2em; text-transform: uppercase; }