/* ==========================================================================
   THEME.CSS - Dark Futuristic Theme
   Professora Janaína Arruda - SaaS Questões MVP

   Paleta extraída da IDV oficial:
     Roxo principal:  #5017b8
     Rosa/Magenta:    #be1661
     Laranja vibrante:#e2510a
     Amarelo/Laranja: #ff9600

   Fontes da marca: Neulis (headings), Dazzle Unicase (display), Humming (accent)
   ========================================================================== */

/* -- Font Faces ----------------------------------------------------------- */
@font-face {
  font-family: 'Dazzle Unicase';
  src: url('../assets/fonts/Dazzle-Unicase-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Dazzle Unicase';
  src: url('../assets/fonts/Dazzle-Unicase-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Humming';
  src: url('../assets/fonts/Humming.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

/* -- CSS Custom Properties (Design Tokens) -------------------------------- */
:root {
  /* === Brand Colors (IDV Official) === */
  --color-brand-purple:       #5017b8;
  --color-brand-purple-light: #6b2fd6;
  --color-brand-purple-dark:  #3a0f8a;
  --color-brand-magenta:      #be1661;
  --color-brand-magenta-light:#d91e74;
  --color-brand-orange:       #e2510a;
  --color-brand-orange-light: #f06218;
  --color-brand-amber:        #ff9600;
  --color-brand-amber-light:  #ffab2e;

  /* === Dark Theme Surfaces === */
  --color-bg-deep:            #0a0a12;
  --color-bg-primary:         #0e0e1a;
  --color-bg-secondary:       #141425;
  --color-bg-elevated:        #1a1a32;
  --color-bg-card:            rgba(20, 20, 42, 0.6);
  --color-bg-glass:           rgba(26, 26, 50, 0.45);
  --color-bg-input:           rgba(14, 14, 30, 0.8);

  /* === Text Colors === */
  --color-text-primary:       #f0f0f5;
  --color-text-secondary:     #a0a0b8;
  --color-text-muted:         #6b6b85;
  --color-text-inverse:       #0a0a12;
  --color-text-accent:        #ff9600;

  /* === Borders === */
  --color-border-subtle:      rgba(255, 255, 255, 0.06);
  --color-border-default:     rgba(255, 255, 255, 0.10);
  --color-border-focus:       rgba(80, 23, 184, 0.6);

  /* === Gradients (Brand) === */
  --gradient-brand-primary:   linear-gradient(135deg, #5017b8, #be1661);
  --gradient-brand-warm:      linear-gradient(135deg, #be1661, #e2510a, #ff9600);
  --gradient-brand-full:      linear-gradient(135deg, #5017b8, #be1661, #e2510a, #ff9600);
  --gradient-brand-subtle:    linear-gradient(135deg, rgba(80, 23, 184, 0.15), rgba(190, 22, 97, 0.15));
  --gradient-brand-glow:      linear-gradient(135deg, rgba(80, 23, 184, 0.4), rgba(190, 22, 97, 0.4));

  /* === Gradients (UI / Surface) === */
  --gradient-surface:         linear-gradient(180deg, rgba(26, 26, 50, 0.8), rgba(14, 14, 30, 0.9));
  --gradient-mesh-1:          radial-gradient(ellipse at 20% 50%, rgba(80, 23, 184, 0.15) 0%, transparent 50%);
  --gradient-mesh-2:          radial-gradient(ellipse at 80% 20%, rgba(190, 22, 97, 0.10) 0%, transparent 50%);
  --gradient-mesh-3:          radial-gradient(ellipse at 60% 80%, rgba(226, 81, 10, 0.08) 0%, transparent 50%);

  /* === Glassmorphism === */
  --glass-bg:                 rgba(26, 26, 50, 0.45);
  --glass-border:             rgba(255, 255, 255, 0.08);
  --glass-shadow:             0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-blur:               20px;

  /* === Glows & Shadows === */
  --glow-purple:              0 0 20px rgba(80, 23, 184, 0.3), 0 0 60px rgba(80, 23, 184, 0.1);
  --glow-magenta:             0 0 20px rgba(190, 22, 97, 0.3), 0 0 60px rgba(190, 22, 97, 0.1);
  --glow-amber:               0 0 20px rgba(255, 150, 0, 0.3), 0 0 60px rgba(255, 150, 0, 0.1);
  --glow-input-focus:         0 0 0 3px rgba(80, 23, 184, 0.25), 0 0 20px rgba(80, 23, 184, 0.15);
  --shadow-sm:                0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:                0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:                0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:                0 16px 64px rgba(0, 0, 0, 0.6);

  /* === Typography === */
  --font-display:             'Dazzle Unicase', 'Inter', system-ui, sans-serif;
  --font-heading:             'Inter', system-ui, -apple-system, sans-serif;
  --font-body:                'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:              'Humming', cursive;

  --text-xs:                  0.75rem;    /* 12px */
  --text-sm:                  0.875rem;   /* 14px */
  --text-base:                1rem;       /* 16px */
  --text-lg:                  1.125rem;   /* 18px */
  --text-xl:                  1.25rem;    /* 20px */
  --text-2xl:                 1.5rem;     /* 24px */
  --text-3xl:                 1.875rem;   /* 30px */
  --text-4xl:                 2.25rem;    /* 36px */
  --text-5xl:                 3rem;       /* 48px */

  --leading-tight:            1.2;
  --leading-normal:           1.5;
  --leading-relaxed:          1.65;

  /* === Spacing === */
  --space-1:                  0.25rem;    /* 4px */
  --space-2:                  0.5rem;     /* 8px */
  --space-3:                  0.75rem;    /* 12px */
  --space-4:                  1rem;       /* 16px */
  --space-5:                  1.25rem;    /* 20px */
  --space-6:                  1.5rem;     /* 24px */
  --space-8:                  2rem;       /* 32px */
  --space-10:                 2.5rem;     /* 40px */
  --space-12:                 3rem;       /* 48px */
  --space-16:                 4rem;       /* 64px */

  /* === Border Radius === */
  --radius-sm:                6px;
  --radius-md:                10px;
  --radius-lg:                16px;
  --radius-xl:                24px;
  --radius-full:              9999px;

  /* === Transitions === */
  --ease-smooth:              cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:              cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:            150ms;
  --duration-normal:          250ms;
  --duration-slow:            400ms;
  --duration-enter:           500ms;

  /* === Z-Index Scale === */
  --z-base:                   0;
  --z-dropdown:               100;
  --z-sticky:                 200;
  --z-overlay:                300;
  --z-modal:                  400;
  --z-toast:                  500;
}

/* -- Global Reset & Base -------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

/* -- Mesh gradient background (reusable on pages) ------------------------- */
.bg-mesh {
  position: relative;
  background-color: var(--color-bg-deep);
}

.bg-mesh::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    var(--gradient-mesh-1),
    var(--gradient-mesh-2),
    var(--gradient-mesh-3),
    var(--color-bg-deep);
  pointer-events: none;
}

/* -- Typography Utilities ------------------------------------------------- */
.font-display  { font-family: var(--font-display); }
.font-heading  { font-family: var(--font-heading); }
.font-accent   { font-family: var(--font-accent); }

.text-gradient {
  background: var(--gradient-brand-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* -- Glassmorphism Card --------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* -- Focus Ring (Accessibility) ------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-brand-purple-light);
  outline-offset: 2px;
}

/* -- Selection ------------------------------------------------------------ */
::selection {
  background: rgba(80, 23, 184, 0.4);
  color: var(--color-text-primary);
}

/* -- Scrollbar (Webkit) --------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-purple-dark);
}

/* -- Animation Keyframes -------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glow-purple); }
  50%      { box-shadow: 0 0 30px rgba(80, 23, 184, 0.5), 0 0 80px rgba(80, 23, 184, 0.2); }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -- Utility: Animate on Enter -------------------------------------------- */
.animate-fade-in     { animation: fadeIn var(--duration-enter) var(--ease-smooth) both; }
.animate-fade-in-up  { animation: fadeInUp var(--duration-enter) var(--ease-smooth) both; }
.animate-slide-left  { animation: slideInLeft var(--duration-enter) var(--ease-smooth) both; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* -- Utility: Screen Reader Only ------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}