/**
 * OneguS BioLynk — Variáveis globais
 * Cores, gradientes, bordas, blur, sombras, espaçamentos e transições.
 */

:root {
  /* Cores base */
  --ob-bg: #0b0d13;
  --ob-glass: rgba(255, 255, 255, 0.08);
  --ob-glass-strong: rgba(255, 255, 255, 0.12);
  --ob-stroke: rgba(255, 255, 255, 0.15);
  --ob-stroke-light: rgba(255, 255, 255, 0.25);
  --ob-txt: #e6e9ef;
  --ob-txt-muted: rgba(255, 255, 255, 0.85);

  /* Accent — grape & gold */
  --ob-accent-primary: #8238B3;
  --ob-accent-secondary: #D7AC28;
  --ob-accent-hover: rgba(130, 56, 179, 0.2);
  --ob-accent-gold-dark: #C78D17;
  --ob-accent-purple-light: #EFD9F7;
  --ob-accent-indigo: #D00666;

  /* Gradientes reutilizáveis */
  --ob-gradient-accent: linear-gradient(135deg, var(--ob-accent-primary), var(--ob-accent-secondary));
  --ob-gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.5));
  --ob-gradient-glass-hover: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.7));
  --ob-gradient-panel: linear-gradient(135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(130, 56, 179, 0.2) 100%);
  --ob-gradient-shine: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent);
  --ob-gradient-shine-gold: linear-gradient(90deg,
    transparent 0%,
    rgba(215, 172, 40, 0.12) 30%,
    rgba(215, 172, 40, 0.28) 50%,
    rgba(215, 172, 40, 0.12) 70%,
    transparent 100%);

  /* Bordas */
  --ob-radius-sm: 12px;
  --ob-radius-md: 14px;
  --ob-radius-lg: 20px;
  --ob-radius-xl: 24px;
  --ob-radius-pill: 999px;
  --ob-border-glass: 1px solid rgba(255, 255, 255, 0.25);
  --ob-border-btn: 1px solid rgba(239, 217, 247, 0.45);

  /* Blur */
  --ob-blur-sm: 8px;
  --ob-blur-md: 14px;
  --ob-blur-lg: 16px;

  /* Sombras */
  --ob-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
  --ob-shadow-soft-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --ob-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 20px rgba(239, 217, 247, 0.25),
    0 0 0 1px rgba(239, 217, 247, 0.15);
  --ob-shadow-btn-hover: 0 4px 24px rgba(239, 217, 247, 0.35),
    0 0 28px rgba(239, 217, 247, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --ob-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --ob-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ob-shadow-video: 0 25px 50px rgba(0, 0, 0, 0.5),
    0 20px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);

  /* Tipografia */
  --ob-font-primary: 'Lato', system-ui, -apple-system, sans-serif;
  --ob-font-secondary: 'Roboto', system-ui, sans-serif;

  /* Transições */
  --ob-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ob-duration-fast: 0.2s;
  --ob-duration-normal: 0.3s;
  --ob-duration-slow: 0.5s;

  /* Focus (acessibilidade) */
  --ob-focus-ring: 0 0 0 3px var(--ob-bg), 0 0 0 5px var(--ob-accent-purple-light);

  /* Safe area (notch / navegadores in-app) */
  --ob-safe-top: env(safe-area-inset-top, 0);
  --ob-safe-right: env(safe-area-inset-right, 0);
  --ob-safe-bottom: env(safe-area-inset-bottom, 0);
  --ob-safe-left: env(safe-area-inset-left, 0);

  /* Layout */
  --ob-content-pad: clamp(16px, 3vw, 40px);
  --ob-bio-max-width: 520px;
  --ob-bio-width: min(var(--ob-bio-max-width), 92vw);
}