/**
 * Lincs Lootcave OS — Site Foundation
 * Shared design tokens and storefront primitives.
 */

:root {
    /* Brand */
    --ll-gold: #d4af37;
    --ll-gold-soft: #e6c96a;
    --ll-lime: #8aff00;
    --ll-purple: #802eff;

    /* Backgrounds */
    --ll-bg: #070b13;
    --ll-bg-deep: #050814;
    --ll-bg-2: #0b0f18;
    --ll-surface: #121722;
    --ll-surface-2: #171c28;

    /* Text */
    --ll-text: #f3f3f3;
    --ll-muted: #9a9a9a;

    /* Borders */
    --ll-border-gold: rgba(212, 175, 55, 0.16);
    --ll-border-gold-strong: rgba(212, 175, 55, 0.28);

    /* Radius */
    --ll-radius-sm: 12px;
    --ll-radius-md: 16px;
    --ll-radius-lg: 22px;
    --ll-radius-xl: 28px;

    /* Shadows */
    --ll-shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.22);
    --ll-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.28);
    --ll-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.36);

    /* Glow */
    --ll-glow-lime-soft: rgba(138, 255, 0, 0.10);
    --ll-glow-purple-soft: rgba(128, 46, 255, 0.14);
    --ll-glow-gold-soft: rgba(212, 175, 55, 0.08);
}

body {
    background:
        radial-gradient(circle at 12% 22%,
            var(--ll-glow-purple-soft),
            transparent 32%),
        radial-gradient(circle at 88% 24%,
            var(--ll-glow-lime-soft),
            transparent 34%),
        radial-gradient(circle at 50% 0%,
            var(--ll-glow-gold-soft),
            transparent 30%),
        linear-gradient(180deg,
            var(--ll-bg) 0%,
            var(--ll-bg-2) 100%);

    color: var(--ll-text);
    background-attachment: fixed;
}

a {
    color: var(--ll-gold);
}

a:hover {
    color: var(--ll-gold-soft);
}

.footer-card {
    padding: 28px 24px;
    border: 1px solid var(--ll-border-gold);
    border-radius: var(--ll-radius-lg);
    background:
        linear-gradient(180deg,
            var(--ll-surface) 0%,
            #0d111a 100%);
    box-shadow: var(--ll-shadow-md);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.screen-reader-text:focus {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 100000 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}