/* ==========================================================================
   CyberBuzz — Base Styles
   Reset, typography, and global element styles.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--cb-bg);
    color: var(--cb-text);
    font-family: var(--cb-font-sans);
    font-size: var(--cb-text-base);
    line-height: var(--cb-leading-normal);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--cb-duration-base) var(--cb-ease),
                color var(--cb-duration-base) var(--cb-ease);
}

/* Subtle grid texture overlay (hacker aesthetic) — dark mode only */
[data-theme="dark"] body::before,
:root:not([data-theme="light"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(57, 255, 20, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 255, 20, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cb-font-display);
    font-weight: 800;
    line-height: var(--cb-leading-tight);
    letter-spacing: var(--cb-tracking-tight);
    color: var(--cb-text);
    margin: 0 0 var(--cb-space-4);
}

h1 { font-size: clamp(var(--cb-text-3xl), 5vw, var(--cb-text-5xl)); text-transform: uppercase; }
h2 { font-size: clamp(var(--cb-text-2xl), 4vw, var(--cb-text-4xl)); text-transform: uppercase; }
h3 { font-size: var(--cb-text-2xl); }
h4 { font-size: var(--cb-text-xl); }
h5 { font-size: var(--cb-text-lg); }
h6 { font-size: var(--cb-text-base); text-transform: uppercase; letter-spacing: var(--cb-tracking-wider); }

p { margin: 0 0 var(--cb-space-4); }

a {
    color: var(--cb-accent);
    text-decoration: none;
    transition: color var(--cb-duration-fast) var(--cb-ease);
}
a:hover { color: var(--cb-accent-hover); }

/* Code */
code, pre, kbd, samp {
    font-family: var(--cb-font-mono);
    font-size: 0.92em;
}
code {
    background: var(--cb-bg-input);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-sm);
    padding: 0.15em 0.4em;
    color: var(--cb-accent);
}
pre {
    background: var(--cb-bg-input);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    padding: var(--cb-space-4);
    overflow-x: auto;
}
pre code {
    background: none;
    border: none;
    padding: 0;
}

/* Selection */
::selection {
    background: var(--cb-accent);
    color: var(--cb-accent-text);
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--cb-accent);
    outline-offset: 3px;
    border-radius: var(--cb-radius-sm);
}

/* Skip link (accessibility) */
.cb-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cb-accent);
    color: var(--cb-accent-text);
    padding: var(--cb-space-3) var(--cb-space-5);
    font-weight: 700;
    z-index: 9999;
}
.cb-skip-link:focus {
    left: var(--cb-space-4);
    top: var(--cb-space-4);
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cb-bg); }
::-webkit-scrollbar-thumb {
    background: var(--cb-border-strong);
    border-radius: 6px;
    border: 2px solid var(--cb-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--cb-accent); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Container */
.cb-container {
    width: 100%;
    max-width: var(--cb-container-max);
    margin-inline: auto;
    padding-inline: var(--cb-container-pad);
}

/* Mono tagline */
.cb-tagline {
    font-family: var(--cb-font-mono);
    font-size: var(--cb-text-sm);
    color: var(--cb-text-muted);
    letter-spacing: var(--cb-tracking-wide);
}