/* ============================================================
   Hopeo — hoja de marca ÚNICA para todos los sitios web.
   Fuente de verdad: app/Hopeo/Hopeo/Core/Extensions/Color+Brand.swift
   Si un color cambia allá, cambia AQUÍ. Nunca escribas un hex suelto
   en una página: usa las variables.
   ============================================================ */

:root{
  /* — Colores de marca (1:1 con Color+Brand.swift) — */
  --hopeo-navy:      #0D1B2A;   /* hopeoNavy / fondo oscuro    */
  --hopeo-surface:   #162235;   /* hopeoSurface dark            */
  --hopeo-surface2:  #1D2E46;   /* hopeoSurface2 dark           */
  --hopeo-sand:      #F7F4EF;   /* fondo claro (warm sand)      */
  --hopeo-coral:     #FF6B5C;   /* hopeoCoral                   */
  --hopeo-coral-deep:#FF4F57;   /* hopeoCoralDeep               */
  --hopeo-peach:     #FF9A6A;   /* hopeoPeach                   */
  --hopeo-amber:     #F5A623;   /* hopeoAmber                   */
  --hopeo-teal:      #00C9B1;   /* hopeoTeal                    */
  --hopeo-blue:      #0099CC;   /* hopeoBlue                    */
  --hopeo-green:     #27AE60;   /* hopeoGreen                   */
  --hopeo-red:       #FF5A5F;   /* hopeoRed                     */
  --hopeo-cream:     #FFF6DE;   /* hopeoCream                   */
  --hopeo-text:      #F8F5F1;   /* hopeoText dark               */
  --hopeo-subtext:   #9AABB8;   /* hopeoSubtext dark            */
  --hopeo-line:      rgba(255,255,255,.10);

  /* — Tipografía —
     La app usa design: .rounded en CADA texto. En la web eso es
     ui-rounded / SF Pro Rounded: es lo que hace que el sitio "se sienta"
     Hopeo y no una web genérica. */
  --hopeo-font: ui-rounded, "SF Pro Rounded", -apple-system,
                BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* — Radios (la app usa esquinas muy redondeadas) — */
  --hopeo-r-sm: 11px;
  --hopeo-r-md: 14px;
  --hopeo-r-lg: 18px;
  --hopeo-r-pill: 999px;

  /* — Gradiente primario, el mismo LinearGradient.hopeoPrimary — */
  --hopeo-gradient: linear-gradient(90deg, var(--hopeo-coral), var(--hopeo-coral-deep));

  /* Tokens que cambian con el tema. Por defecto = oscuro, igual que la app. */
  --hopeo-bg:       var(--hopeo-navy);
  --hopeo-card:     var(--hopeo-surface);
  --hopeo-card2:    var(--hopeo-surface2);
  --hopeo-fg:       var(--hopeo-text);
  --hopeo-fg-muted: var(--hopeo-subtext);
  --hopeo-hairline: var(--hopeo-line);
}

/* — Modo claro — mismos valores que Color+Brand.swift en light:
     fondo arena cálida, superficies blancas, texto navy. */
@media (prefers-color-scheme: light){
  :root{
    --hopeo-bg:       #F7F4EF;   /* warm sand      */
    --hopeo-card:     #FFFFFF;
    --hopeo-card2:    #EEE9E0;   /* warm stone     */
    --hopeo-fg:       #0D1B2A;   /* navy on light  */
    --hopeo-fg-muted: #6B7280;
    --hopeo-hairline: rgba(0,0,0,.08);
  }
}

/* Todo texto hereda la redondeada */
html, body, button, input, textarea, select { font-family: var(--hopeo-font); }

/* Pesos: la app tira mucho de .black (900) para títulos */
h1, h2, h3, .hopeo-title { font-weight: 900; letter-spacing: -.3px; }

/* Botón primario, mismo look que PrimaryButtonStyle */
.hopeo-cta{
  display:inline-block; padding:14px 28px; border:none;
  border-radius:var(--hopeo-r-pill); font-weight:800; font-size:1rem;
  color:#fff; background:var(--hopeo-gradient); cursor:pointer;
  box-shadow:0 8px 24px rgba(255,79,87,.34);
  font-family:var(--hopeo-font);
}
.hopeo-cta:hover{ filter:brightness(1.07); }
.hopeo-cta:active{ transform:scale(.985); }

/* Sello de verificado, mismo lenguaje que el de la app */
.hopeo-verified{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--hopeo-teal); font-weight:700; font-size:.82rem;
  background:rgba(0,201,177,.12); border:1px solid rgba(0,201,177,.38);
  padding:4px 10px; border-radius:var(--hopeo-r-pill);
}