/* ============================================================
   OVO ACADEMY — Design Tokens
   Minimalista · monocromático · premium (Notion / Fintual)
   ============================================================ */

:root {
  /* ---- Color · Neutrales (base cálida, estilo Notion) ---- */
  --bg:            #FFFFFF;   /* fondo SIEMPRE blanco */
  --surface:       #FFFFFF;
  --surface-2:     #FAFAF9;   /* gris cálido muy sutil — hovers, paneles */
  --surface-3:     #F4F4F2;   /* gris cálido — chips, estados activos */

  --ink-900:       #1D1D1F;   /* texto principal (negro Apple) */
  --ink-700:       #3A3A3C;   /* texto fuerte secundario */
  --ink-500:       #6E6E73;   /* texto secundario */
  --ink-400:       #8E8E93;   /* texto terciario / placeholders */
  --ink-300:       #AEAEB2;   /* iconos apagados */

  --line:          #ECECEA;   /* bordes / divisores */
  --line-strong:   #DEDEDC;   /* bordes con más presencia */

  /* ---- Acento (uso mínimo: foco, links, progreso) ---- */
  --accent:        #1D1D1F;   /* el "acento" premium es el negro */
  --accent-soft:   #F4F4F2;   /* fondo de estado activo */
  --focus:         #0A84FF;   /* anillo de foco accesible (Apple blue) */

  /* ---- Semánticos (discretos) ---- */
  --success:       #2C8A5B;
  --success-soft:  #ECF5EF;
  --warning:       #B4690E;
  --warning-soft:  #FBF1E5;

  /* ---- CTA de pago (verde, decisión de producto) ---- */
  --pay:           #1FA463;   /* botón "Pagar con Flow" */
  --pay-hover:     #198A53;
  /* ---- Clases en vivo (violeta, card del portal) ---- */
  --accent-live:      #7C3AED;
  --accent-live-soft: #F3EEFF;

  /* ---- Tipografía ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", system-ui, sans-serif;

  --fs-display: 40px;  --lh-display: 46px;
  --fs-h1:      30px;  --lh-h1:      36px;
  --fs-h2:      22px;  --lh-h2:      28px;
  --fs-h3:      18px;  --lh-h3:      24px;
  --fs-body-l:  16px;  --lh-body-l:  26px;
  --fs-body:    15px;  --lh-body:    24px;
  --fs-sm:      13px;  --lh-sm:      20px;
  --fs-xs:      12px;  --lh-xs:      16px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* ---- Espaciado (base 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ---- Radios ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---- Sombras (muy sutiles) ---- */
  --shadow-xs: 0 1px 2px rgba(17,17,17,.04);
  --shadow-sm: 0 1px 3px rgba(17,17,17,.06), 0 1px 2px rgba(17,17,17,.04);
  --shadow-md: 0 4px 16px rgba(17,17,17,.07), 0 1px 3px rgba(17,17,17,.05);
  --shadow-lg: 0 12px 32px rgba(17,17,17,.10), 0 2px 8px rgba(17,17,17,.06);

  /* ---- Layout ---- */
  --sidebar-w: 260px;
  --content-max: 960px;
  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #1D1D1F; color: #fff; }