/* ==========================================================================
   TRYOOZEN TECH — Base Styles & Typography
   Version: 2.0.0 (Visual DNA & Design Foundation)
   Typography, global element styling, and foundational visual rules.
   Uses design tokens from tokens.css exclusively.
   ========================================================================== */

:root {
  --tz-safe-top: env(safe-area-inset-top, 0px);
  --tz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tz-safe-left: env(safe-area-inset-left, 0px);
  --tz-safe-right: env(safe-area-inset-right, 0px);
}

/* ──────────────────────────────────────────────────────────────────────────
   DOCUMENT & ZERO HORIZONTAL OVERFLOW
   ────────────────────────────────────────────────────────────────────────── */
html {
  box-sizing: border-box;
  overflow-x: hidden;
  width: 100%;
}

*, *:before, *:after, summary {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  padding-left: var(--tz-safe-left);
  padding-right: var(--tz-safe-right);
  font-family: var(--tz-font-family);
  font-weight: var(--tz-font-weight-regular);
  font-size: var(--tz-body-md);
  line-height: var(--tz-leading-normal);
  color: var(--tz-text-primary);
  background-color: var(--tz-bg-primary);
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 136, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 60%, rgba(139, 92, 246, 0.06), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ──────────────────────────────────────────────────────────────────────────
   SEMANTIC TYPOGRAPHY SCALE (PRD §57, Skill 04, Titan 02 Section 13)
   ────────────────────────────────────────────────────────────────────────── */

/* Display Titles (Hero & Major Impact) */
.tz-display-xl {
  font-size: var(--tz-display-xl);
  font-weight: var(--tz-font-weight-extrabold);
  line-height: var(--tz-leading-tight);
  letter-spacing: var(--tz-tracking-tight);
}

.tz-display-lg {
  font-size: var(--tz-display-lg);
  font-weight: var(--tz-font-weight-extrabold);
  line-height: var(--tz-leading-tight);
  letter-spacing: var(--tz-tracking-tight);
}

.tz-display-md {
  font-size: var(--tz-display-md);
  font-weight: var(--tz-font-weight-bold);
  line-height: var(--tz-leading-tight);
  letter-spacing: var(--tz-tracking-tight);
}

/* Headings (Section Titles & Cards) */
.tz-heading-xl {
  font-size: var(--tz-heading-xl);
  font-weight: var(--tz-font-weight-bold);
  line-height: var(--tz-leading-snug);
  letter-spacing: var(--tz-tracking-tight);
}

.tz-heading-lg {
  font-size: var(--tz-heading-lg);
  font-weight: var(--tz-font-weight-semibold);
  line-height: var(--tz-leading-snug);
}

.tz-heading-md {
  font-size: var(--tz-heading-md);
  font-weight: var(--tz-font-weight-semibold);
  line-height: var(--tz-leading-snug);
}

.tz-heading-sm {
  font-size: var(--tz-heading-sm);
  font-weight: var(--tz-font-weight-semibold);
  line-height: var(--tz-leading-normal);
}

/* Body Text */
.tz-body-lg {
  font-size: var(--tz-body-lg);
  font-weight: var(--tz-font-weight-regular);
  line-height: var(--tz-leading-relaxed);
  color: var(--tz-text-secondary);
}

.tz-body-md,
.tz-body {
  font-size: var(--tz-body-md);
  font-weight: var(--tz-font-weight-regular);
  line-height: var(--tz-leading-relaxed);
  color: var(--tz-text-secondary);
}

.tz-body-sm {
  font-size: var(--tz-body-sm);
  font-weight: var(--tz-font-weight-regular);
  line-height: var(--tz-leading-normal);
  color: var(--tz-text-secondary);
}

/* Labels & Actions */
.tz-label-lg {
  font-size: var(--tz-label-lg);
  font-weight: var(--tz-font-weight-semibold);
  letter-spacing: var(--tz-tracking-wide);
  text-transform: uppercase;
}

.tz-label-md,
.tz-label {
  font-size: var(--tz-label-md);
  font-weight: var(--tz-font-weight-medium);
  letter-spacing: var(--tz-tracking-wide);
  text-transform: uppercase;
}

.tz-label-sm {
  font-size: var(--tz-label-sm);
  font-weight: var(--tz-font-weight-medium);
  letter-spacing: var(--tz-tracking-wider);
  text-transform: uppercase;
}

/* Caption & Micro Metadata */
.tz-caption {
  font-size: var(--tz-caption);
  color: var(--tz-text-tertiary);
  line-height: var(--tz-leading-normal);
}

.tz-micro {
  font-size: var(--tz-micro);
  color: var(--tz-text-tertiary);
  line-height: var(--tz-leading-normal);
  letter-spacing: var(--tz-tracking-wide);
}

/* Monospace Code / API Key preview */
.tz-code {
  font-family: var(--tz-font-mono);
  font-size: 0.875em;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--tz-border-subtle);
  border-radius: var(--tz-radius-sm);
  padding: 0.15em 0.4em;
  color: var(--tz-accent-cyan);
}

/* ──────────────────────────────────────────────────────────────────────────
   GRADIENT TEXT UTILITY (Titan 02 Section 77)
   Strictly for hero titles, brand logos, or key headlines — NEVER body text.
   ────────────────────────────────────────────────────────────────────────── */
.tz-text-gradient {
  background-image: var(--tz-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.tz-text-gradient-soft {
  background-image: var(--tz-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────────────
   LINKS
   ────────────────────────────────────────────────────────────────────────── */
a:not([class]) {
  color: var(--tz-accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--tz-duration-fast) var(--tz-ease-standard);
}

a:not([class]):hover {
  color: #33DDFF;
}

a:not([class]):focus-visible {
  outline: 2px solid var(--tz-border-focus);
  outline-offset: 3px;
  border-radius: var(--tz-radius-sm);
}

.tz-link {
  color: var(--tz-accent-cyan);
  text-decoration: none;
  font-weight: var(--tz-font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--tz-space-1);
  transition: all var(--tz-duration-fast) var(--tz-ease-standard);
}

.tz-link:hover {
  color: #33DDFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────────────────
   FOCUS RING & ACCESSIBILITY (Section 61, WCAG 2.1 AA)
   Works cleanly across both dark backgrounds and light graphics.
   ────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--tz-accent-cyan, #00D4FF);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tz-accent-cyan, #00D4FF);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   ACCESSIBLE SKIP LINK FOCUS (WCAG 2.1 AA — 2.4.1 Bypass Blocks)
   Pops cleanly into viewport over navigation on first Tab keypress.
   ────────────────────────────────────────────────────────────────────────── */
.sr-only:focus {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 10000 !important;
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  background-color: var(--tz-bg-surface, #131825) !important;
  color: var(--tz-accent-cyan, #00D4FF) !important;
  border: 2px solid var(--tz-accent-cyan, #00D4FF) !important;
  border-radius: var(--tz-radius-md, 8px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   REDUCED MOTION (WCAG 2.1 AA — 2.3.3 Animation from Interactions)
   ────────────────────────────────────────────────────────────────────────── */
@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;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SELECTION
   ────────────────────────────────────────────────────────────────────────── */
::selection {
  background-color: rgba(0, 212, 255, 0.3);
  color: #FFFFFF;
}