/* 360vrtube — Redesign theme (Telecoming VR 360 Website Redesign, Figma) */

:root {
  /* Base surface (RGB — usado por Tailwind semantic tokens) */
  --base-0: 253 251 255;
  --base-950: 17 18 55;

  /* App background & foreground */
  --background: #0D0D14;
  --foreground: #A0A0B8;

  /* Primary alias — usado por componentes genéricos (my-account, etc.) */
  --color-primary: #6C5EFF;
  --color-primary-hover: #5549D4;

  /* Primary — Violet/Blue (paleta oficial Figma, escala 10→110 mapeada a slots 50→950) */
  --primary-50:  #EAE8FF;
  --primary-100: #D9D5FF;
  --primary-200: #C6C1FF;
  --primary-300: #B0A9FF;
  --primary-400: #978EFF;
  --primary-500: #6C5EFF;
  --primary-600: #1603E9;
  --primary-700: #0E00AE;
  --primary-800: #0A007C;
  --primary-900: #07004F;
  --primary-950: #030026;

  /* Secondary — Teal/Green (paleta oficial Figma, escala 10→110) */
  --secondary-50:  #C8FFF4;
  --secondary-100: #9DFFEB;
  --secondary-200: #72FFE3;
  --secondary-300: #45FFDA;
  --secondary-400: #17FED0;
  --secondary-500: #00D4A9;
  --secondary-600: #00A987;
  --secondary-700: #00856B;
  --secondary-800: #00634F;
  --secondary-900: #004134;

  /* Alert — Red (paleta oficial Figma, escala 10→110) */
  --alert-50:  #FFD4D4;
  --alert-100: #FFB2B2;
  --alert-200: #FF9494;
  --alert-300: #FF7A7A;
  --alert-400: #FF6767;
  --alert-500: #FF5C5C;
  --alert-600: #FF4545;
  --alert-700: #FD1C1C;
  --alert-800: #D70000;
  --alert-900: #970000;
  --alert-950: #4F0000;

  /* Neutral */
  --neutral-100: #f5f5f5;
  --neutral-300: #d9d9d9;
  --neutral-500: #A0A0B8;
  --neutral-600: #8c8c8c;
  --neutral-700: #595959;
  --neutral-800: #454545;
  --neutral-900: #262626;
  --neutral-950: #141414;
  --neutral-1000: #000000;

  /* Semantic Tokens */
  --color-surface-base:        rgb(var(--base-0));
  --color-surface-base-op-16:  rgba(253, 251, 255, 0.16);
  --color-surface-base-op-32:  rgba(253, 251, 255, 0.32);
  --color-text-base:           rgb(var(--base-0));
  --color-text-base-op-64:     rgba(253, 251, 255, 0.64);
  --color-text-inverse:        rgb(var(--base-950));
  --color-text-muted:          rgba(253, 251, 255, 0.5);
  --color-border:              rgba(255, 255, 255, 0.12);
  --color-input-border:        rgba(255, 255, 255, 0.2);
  --color-modal-bg:            #1E1E30;

  /* Gradient — valor exacto provisto por diseño (Figma) */
  --gradient-primary-secondary: linear-gradient(101.65deg, #978EFF 3.29%, #0E00AE 96.26%);

  /* Purple scale — gradient endpoint (compat con default/360vrtube) */
  --purple-700: #0E00AE;

  /* Layout Components */
  --gradient-header: linear-gradient(224deg, var(--background) 0%, var(--purple-700) 100%);
  --footer-bg:     linear-gradient(0deg, #0D0D14 0%, #030116 100%);
  --footer-border: 1px solid rgba(255, 255, 255, 0.08);

  /* ── Header — Redesign "glass / pill nav" tokens ─────────────────────────
   * Consumidos por Header.tsx + globals.css (.header, .header-nav-pill,
   * .nav-item, .header-login-btn). En default.css / 360vrtube.css estos
   * mismos tokens quedan mapeados a valores que preservan la apariencia
   * previa (header sólido, sin pill), manteniendo el componente idéntico
   * entre temas y aislando el cambio visual en las variables.
   * ─────────────────────────────────────────────────────────────────────── */
  --header-position:         fixed;  /* flota sobre el hero, deja ver la imagen/video de fondo */
  --header-height:           88px;   /* alto real del header flotante (56px fila de contenido + 16px*2 de aire) */
  --header-padding-y:        16px;   /* aire vertical arriba/abajo del pill de nav */
  --header-bg:               rgba(30, 30, 48, 0.12);
  --header-blur:             6px;
  --header-shadow:           none;
  --header-border:           none;
  --header-nav-pill-bg:      rgba(30, 30, 48, 0.15);
  --header-nav-pill-border:  #2B2B40;
  --header-nav-text:         #A0A0B8;
  --header-nav-text-hover:   #FFFFFF;
  --header-nav-text-active:  var(--primary-400);
  --header-login-gradient:   linear-gradient(133deg, #9E9ED7 9%, #1E1E30 89%);
  --header-login-border:     #2B2B40;
  --header-login-text:       #D9D5FF;

  /* Fondo sólido del menú mobile desplegado (legibilidad garantizada sobre
   * cualquier hero/imagen de fondo, a diferencia del --header-bg del header
   * flotante que es translúcido/gradiente). */
  --mobile-menu-bg:          var(--background);

  /* Dropdown */
  --color-dropdown-bg:               #1E1E30;
  --color-dropdown-border:           rgba(255, 255, 255, 0.12);
  --color-dropdown-hover:            rgba(108, 94, 255, 0.2);
  --color-dropdown-text:             #A0A0B8;
  --color-dropdown-text-selected:    #ffffff;
  --color-dropdown-item-selected:    #6C5EFF;
  --bg-dropdown-item-selected:       rgba(108, 94, 255, 0.15);
  --bg-dropdown-item-selected-hover: rgba(108, 94, 255, 0.28);

  /* Misc UI */
  --color-icon-default:      #ffffff;
  --color-overlay-dark:      rgba(7, 3, 27, 0.72);
  --color-border-base-op-16: rgba(255, 255, 255, 0.16);
  --color-focus-outline:     var(--primary-500);

  /* CTA Buttons */
  --color-cta-border:        #F4BA61;
  --color-cta-border-hover:  #F6C478;
  --color-cta-text:          #F4BA61;

  /* Status colors — alineados a la nueva escala Alert */
  --color-error:   var(--alert-700);
  --color-caution: #F8A504;

  /* ── ForYou Section Theme ──────────────────────────────────────────────────
   * Estas variables controlan los colores del componente ForYouFullPage.
   * El SDK las lee automáticamente. Si no están definidas, usa las vars
   * genéricas del tema (--primary-*, --neutral-*, --background).
   * ─────────────────────────────────────────────────────────────────────── */
  --foryou-border: rgba(255, 255, 255, 0.133);

  /* ── SDK COMPAT ─────────────────────────────────────────────────────────────
   * Variables CSS "ancla" que webs-sdk usa internamente en CSS-in-JS de
   * componentes (ej. CreativeFaceSwap) para paneles/superficies que no pasan
   * por la prop `theme`. Cada portal debe mapearlas a su propia paleta.
   * ─────────────────────────────────────────────────────────────────────── */
  --color-surface-base: #1A1220;
  --neutral-10:          #1A1220;
  --theme-color:         var(--primary-500);

  /* GameLauncherCard — franja lavanda claro con texto navy oscuro (Figma specs:
   * strip bg #B0A9FF (primary-300), text #030026, play button solid indigo,
   * image scrim linear-gradient #030026 0%→80% para transición suave
   * imagen→franja). */
  --card-launcher-frame:   var(--primary-300);
  --card-launcher-text:    var(--primary-950);
  --card-launcher-play-bg: var(--primary-600);
  --card-launcher-scrim:   linear-gradient(to bottom, rgba(3, 0, 38, 0) 0%, rgba(3, 0, 38, 0.8) 100%);
}