/* ==========================================================================
   ROLETA PLUGTOOLS - DESIGN SYSTEM (GOOGLE GEMINI V2 THEME)
   Reference: https://gemini.google/br/about/
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Flex:wght@400;600;700;800;900&family=Poppins:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;600&display=swap');

:root {
  /* Paleta da marca (fatias da roleta, destaques) */
  --google-blue: #0C11FE;
  --google-red: #FF0000;
  --google-yellow: #FFB100;
  --google-green: #01FC97;

  /* Azul de interface (botões, foco, brilhos e sombras).
     Transparências: color-mix(in srgb, var(--primary) 45%, transparent) */
  --primary: #1a73e8;
  --primary-light: #4285f4;

  --white: #ffffff;
  --success: #34a853;
  --surface-dark: #0f172a;

  /* TEMA CLARO (PADRÃO) */
  --bg-deep: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-hover: color-mix(in srgb, var(--primary-light) 40%, transparent);
  --border-spark: color-mix(in srgb, var(--primary-light) 25%, transparent);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-accent: var(--primary);

  --card-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);

  /* Typography */
  --font-display: 'Google Sans Flex', 'Google Sans', 'Poppins', -apple-system, sans-serif;
  --font-heading: 'Google Sans', 'Poppins', -apple-system, sans-serif;
  --font-body: 'Google Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* Spacing & Radii (Google Pill & Bento Curve) */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-bento: 28px;
  --radius-full: 9999px;

  --container-max: 1200px;
  --transition-fast: 0.15s cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: 0.3s cubic-bezier(0.2, 0, 0, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* TEMA ESCURO (DEFINIDO NO LINK PELO ADMIN OU VIA TOGGLE) */
html.theme-dark {
  --bg-deep: #080c16;
  --bg-surface: #121829;
  --bg-surface-elevated: #182035;
  --bg-card: rgba(18, 24, 41, 0.78);
  --bg-card-hover: rgba(26, 35, 60, 0.88);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: color-mix(in srgb, var(--primary-light) 35%, transparent);
  --border-spark: rgba(150, 157, 255, 0.4);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #749bff;

  --card-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

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

/* Garante que o atributo hidden vença qualquer display definido nas classes */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-deep);
  color-scheme: light;
}

html.theme-dark {
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary-light) 8%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(189, 153, 254, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 15% 70%, rgba(52, 168, 83, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

html.theme-dark body {
  background-image:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary-light) 14%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(189, 153, 254, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 15% 70%, rgba(52, 168, 83, 0.07) 0%, transparent 50%);
}

/* Fluid Typography Utilities */
.text-gradient-google {
  background: linear-gradient(90deg, var(--primary-light) 0%, #ea4335 35%, #fbbc04 65%, #34a853 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Google-style Pill Tags */
.google-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: #e2e8f0;
  transition: all var(--transition-smooth);
}

.google-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

#hero-pill-text {
  font-size: 1.72rem;
}

.google-pill-spark {
  background: linear-gradient(135deg, rgba(72, 147, 252, 0.12), rgba(189, 153, 254, 0.12));
  border-color: rgba(150, 157, 255, 0.3);
  color: #c7d2fe;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-surface-elevated);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--google-blue);
}