/* ============================================================
   Brouo® — Design tokens
   Derivado del brandbook 2025-2026
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("https://brouo.com/assets/font/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color ---- */
  --color-ink:    #000000;  /* Negro Absoluto */
  --color-deep:   #2D3538;  /* Profundo */
  --color-muted:  #5D6C72;  /* Estable */
  --color-paper:  #F2F6F8;  /* Claro */
  --color-bg:     #FFFFFF;  /* Blanco */
  --color-accent: #23CE6B;  /* Impulso — solo CTAs */
  --color-accent-hover: #1FB85F;
  --surface-dark: #0a0a0a;  /* Negro de superficies (cajas, hero, header scrolled) */

  /* Semantic */
  --text-primary:   var(--color-ink);
  --text-secondary: var(--color-deep);
  --text-muted:     var(--color-muted);
  --bg-default:     var(--color-bg);
  --bg-alt:         var(--color-paper);
  --bg-inverse:     var(--surface-dark);
  --bg-stage:       var(--color-paper); /* body — escenario claro */
  --border-subtle:  rgba(0, 0, 0, 0.08);
  --border-strong:  rgba(0, 0, 0, 0.16);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --text-on-dark:   #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* Action */
  --action-bg:    var(--color-accent);
  --action-text:  var(--color-ink);
  --action-hover: var(--color-accent-hover);

  /* ---- Tipografía ---- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;
  --text-2xl:  2.5rem;
  --text-3xl:  3.5rem;
  --text-4xl:  4.5rem;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;

  /* ---- Espaciado (8pt scale) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* ---- Layout ---- */
  --container-max:        1280px;
  --container-pad-mobile:  var(--space-5);
  --container-pad-tablet:  var(--space-6);
  --container-pad-desktop: var(--space-7);

  --section-pad-mobile:    var(--space-8);
  --section-pad-desktop:   var(--space-10);

  --grid-gap-mobile:       var(--space-5);
  --grid-gap-desktop:      var(--space-6);

  --header-h-mobile:       64px;
  --header-h-desktop:      88px;

  --stage-pad-mobile:      16px;
  --stage-pad-desktop:     30px;

  /* ---- Bordes y radio ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.06);

  /* ---- Transiciones ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;

  /* ---- Z-index ---- */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* Breakpoints (referencia, no son tokens en CSS — se usan en media queries) */
/* Tablet:  @media (min-width: 768px)  */
/* Desktop: @media (min-width: 1024px) */
/* Wide:    @media (min-width: 1280px) */