/* ============================================================
   TOKENS CSS — SportZone Pro
   Additional design tokens and utility classes
   (Core tokens are in style.css :root)
   ============================================================ */

/* Typography scale */
.sz-h1 { font-family: var(--sz-font-head); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.sz-h2 { font-family: var(--sz-font-head); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.sz-h3 { font-family: var(--sz-font-head); font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 600; }

/* Text utilities */
.sz-text-green  { color: var(--sz-green) !important; }
.sz-text-gold   { color: var(--sz-gold)  !important; }
.sz-text-muted  { color: var(--sz-text2) !important; }
.sz-text-center { text-align: center; }
.sz-text-upper  { text-transform: uppercase; letter-spacing: 0.06em; }

/* Spacing */
.sz-mt-0 { margin-top: 0; }
.sz-mb-0 { margin-bottom: 0; }
.sz-mb-8 { margin-bottom: 8px; }
.sz-mb-16 { margin-bottom: 16px; }
.sz-mb-24 { margin-bottom: 24px; }
.sz-mb-32 { margin-bottom: 32px; }

/* Visibility */
.sz-hidden { display: none !important; }
.sz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Dividers */
.sz-divider {
    height: 1px;
    background: var(--sz-border);
    margin: 48px 0;
    border: none;
}

/* Green glow text effect */
.sz-glow-text {
    color: var(--sz-green);
    text-shadow: 0 0 30px rgba(0, 230, 118, 0.5);
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--sz-green);
    outline-offset: 3px;
}

/* Selection */
::selection {
    background: rgba(0, 230, 118, 0.25);
    color: var(--sz-text);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sz-bg2); }
::-webkit-scrollbar-thumb { background: var(--sz-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sz-green); }