@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/InterVariable.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/SpaceGrotesk.woff2') format('woff2');}

:root {
    --background: 220 20% 7%;
    --foreground: 0 0% 95%;

    --card: 220 18% 10%;
    --card-foreground: 0 0% 95%;

    --popover: 220 18% 10%;
    --popover-foreground: 0 0% 95%;

    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 14%;
    --secondary-foreground: 0 0% 90%;

    --muted: 220 15% 16%;
    --muted-foreground: 220 10% 55%;

    --accent: 24 95% 53%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 24 95% 53%;

    --radius: 0.75rem;

    /* Custom tokens */
    --surface-glass: 220 18% 10%;
    --glow-orange: 24 95% 53%;
    --text-secondary: 220 10% 65%;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --gradient-primary: linear-gradient(135deg, hsl(24 95% 53%), hsl(30 100% 60%));
    --gradient-dark: linear-gradient(180deg, hsl(220 20% 7%), hsl(220 20% 4%));
    --gradient-card: linear-gradient(145deg, hsl(220 18% 12%), hsl(220 18% 8%));
    --gradient-hero: radial-gradient(ellipse at 30% 0%, hsl(24 95% 53% / 0.12) 0%, transparent 60%);

    --shadow-card: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
    --shadow-glow: 0 0 40px -8px hsl(24 95% 53% / 0.3);
    --shadow-button: 0 4px 16px -4px hsl(24 95% 53% / 0.4);

    --sidebar-background: 220 18% 10%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 24 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 15% 14%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 220 15% 18%;
    --sidebar-ring: 24 95% 53%;
  }

/* Reguli servite brut (fara PostCSS/Tailwind): @apply expandat manual,
   fara wrappere @layer (ca sa nu piarda prioritatea fata de GeneratePress). */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: var(--gradient-primary);
}

.bg-glass {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: hsl(var(--surface-glass) / 0.8);
  border: 1px solid hsl(var(--border) / 0.5);
}

.card-gradient {
  background: var(--gradient-card);
}

.glow-orange {
  box-shadow: var(--shadow-glow);
}

.hero-gradient {
  background: var(--gradient-hero);
}

.section-fade {
  opacity: 0;
  transform: translateY(2rem);
  animation: fadeInUp 0.6s ease-out forwards;
}

.hover-lift {
  transition: all 0.3s;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-tools {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll-tools {
  animation: scroll-tools 25s linear infinite;
}

.animate-scroll-tools:hover {
  animation-play-state: paused;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px -4px hsl(24 95% 53% / 0.3); }
  50% { box-shadow: 0 0 40px -4px hsl(24 95% 53% / 0.5); }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ========== Accessibility Overrides ========== */

/* High Contrast */
.a11y-high-contrast {
  filter: contrast(1.4);
}

/* Highlight Links */
.a11y-highlight-links a,
.a11y-highlight-links button {
  outline: 2px solid hsl(24 95% 53%) !important;
  outline-offset: 2px;
}

/* Big Cursor */
.a11y-big-cursor,
.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 4 L4 28 L12 20 L20 20 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Dyslexia-friendly font */
.a11y-dyslexia-font,
.a11y-dyslexia-font * {
  font-family: "Comic Sans MS", "OpenDyslexic", cursive, sans-serif !important;
  letter-spacing: 0.05em;
}

/* Text Spacing */
.a11y-text-spacing {
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  line-height: 1.8 !important;
}
.a11y-text-spacing p,
.a11y-text-spacing li,
.a11y-text-spacing span,
.a11y-text-spacing div {
  line-height: 1.8 !important;
}

/* Pause Animations */
.a11y-pause-animations,
.a11y-pause-animations *,
.a11y-pause-animations *::before,
.a11y-pause-animations *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}

/*
 * Fix migrare: GeneratePress (tema parinte) aplica un fundal gri generic pe
 * `button:hover` / `button:focus`. Trigger-ele Radix (accordion, dropdown) sunt
 * <button>-uri native fara clasa de background, deci prindeau banda gri pe zona
 * header-ului (nu si pe continut), rezultand un hover confuz pe item-ul deschis.
 * Designul React intentioneaza `hover:no-underline` (fara schimbare vizuala), deci
 * neutralizam fundalul mostenit. Scope strict pe trigger-ele Radix.
 */
button[aria-controls^="radix"]:hover,
button[aria-controls^="radix"]:focus {
  background-color: transparent;
}