/* ==========================================================================
   Café 107 — Design tokens
   Fuente única de verdad para color, tipografía, espaciado y sombras.
   Las tres páginas (portada, carta, club) leen de aquí: si cambias un valor
   acá, cambia en todo el sitio. No redefinas colores en los CSS de página.
   ========================================================================== */

/* ---- FUENTES ----------------------------------------------------------
   Una sola petición con las cinco familias del sitio. Cargarlas todas acá NO
   penaliza: el navegador solo descarga el archivo de una fuente cuando algún
   texto la usa de verdad, así que la portada nunca baja Fraunces ni las apps
   bajan Instrument Serif. Lo único compartido es este CSS de ~2 KB.

   Se cargan desde un único lugar para que añadir o quitar una familia no haya
   que hacerlo en los tres HTML. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  /* ---- Rampas de marca -------------------------------------------------
     Un solo tono por familia, en varios niveles. Antes había dos paletas
     casi idénticas (portada vs. apps) con nombres distintos para el mismo
     color; esto las unifica sin perder ninguno de los dos acabados. */

  /* Marrón café — de más oscuro a más claro */
  --ink-900:#1B1009;   /* fondo profundo (portada) */
  --ink-800:#2A1A12;   /* fondo medio (portada) */
  --ink-700:#2E1D14;   /* texto principal y superficies oscuras (apps) */
  --ink-600:#4A2C1D;   /* realce del degradado */

  /* Cremas — superficies claras */
  --cream-25:#FFFDF9;  /* papel casi blanco: tarjetas sobre fondo claro */
  --cream-50:#FBF7EC;  /* papel: tarjetas y campos */
  --cream-100:#F6EDE2; /* texto sobre oscuro */
  /* --cream-200 (#EFE1C6, pergamino) era el fondo de las apps. Se retiró de la
     rampa al pasar al crema claro: no lo usaba nadie más. */
  --cream-300:#DCD3B8; /* mesa de impresión de la tarjeta física */

  /* Turquesa del logo */
  --teal-400:#63C7CB;  /* sobre fondo oscuro (portada) */
  --teal-500:#5EC1BE;  /* sobre fondo claro (apps) */
  --teal-300:#8FDADD;  /* hover sobre oscuro */
  --teal-700:#1F5F62;  /* turquesa legible como TEXTO sobre crema (4.5:1) */

  /* Acentos */
  --cherry-500:#A8402F;
  --cherry-600:#7E2E21;
  --berry-400:#E8657A;   /* fresa — puerta del Club en la portada */
  --berry-300:#F2A0AE;
  --berry-600:#A83E52;   /* fresa legible como TEXTO sobre crema */
  --leaf-500:#4F6B4A;    /* verde: éxito, WhatsApp, notas */
  --gold-500:#C08A2E;

  /* ---- Roles semánticos: superficie CLARA (carta, club y panel) ----
     Crema claro de fondo y papel casi blanco encima. El pergamino
     (--cream-200) quedó muy cerca del papel: las tarjetas no se despegaban del
     fondo sin apoyarlas en sombra, y estas páginas son largas. */
  --bg:var(--cream-50);
  --surface:var(--cream-25);
  --text:var(--ink-700);
  --text-muted:rgba(46,29,20,.65);
  --text-subtle:rgba(46,29,20,.45);
  --line:rgba(46,29,20,.18);
  --line-strong:rgba(46,29,20,.32);
  --accent:var(--cherry-500);
  --accent-hover:var(--cherry-600);
  --on-accent:var(--cream-50);
  --success:var(--leaf-500);
  --danger:var(--cherry-500);

  /* ---- Roles semánticos: superficie OSCURA (portada) ----
     Se aplican con .theme-dark, no duplicando la paleta. */

  /* ---- Tipografía ----
     Hay dos juegos y son dos a propósito: cada página se diseñó con el suyo y
     unificarlas empobrece a ambas. Lo que NO se duplica es dónde se definen:
     el juego "apps" en `:root, .type-apps` y el juego "portada" en
     `.type-portada`, los dos justo debajo de este bloque.

     JetBrains Mono es común a los dos: es funcional, no decorativa (precios y
     cifras alineadas en columna), así que vive acá. */
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --fs-eyebrow:11px;
  --ls-eyebrow:.14em;
  --ls-wide:.28em;

  /* ---- Forma y profundidad ---- */
  --r-sm:10px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --r-2xl:28px;
  --r-pill:999px;

  --shadow-sm:0 2px 6px rgba(46,29,20,.18);
  --shadow-md:0 12px 30px -8px rgba(46,29,20,.35);
  --shadow-lg:0 24px 70px -24px rgba(46,29,20,.30);
  --shadow-dark:0 30px 60px rgba(0,0,0,.5);

  /* ---- Layout ---- */
  --maxw-page:900px;   /* club: formulario + tarjeta impresa */
  --maxw-wide:1180px;  /* portada y panel */

  /* Ancho ÚTIL de la página. La cabecera compartida y el cuerpo leen los dos de
     acá, para que los bordes coincidan: cada página lo redefine en su CSS si
     necesita otro. Sin esto la cabecera se quedó en 900 mientras el panel
     creció a 1180, y el logo y los botones quedaban metidos hacia el centro. */
  --maxw-content:var(--maxw-page);
  --pad-x:20px;

  /* ---- Movimiento ---- */
  --t-fast:.2s ease;
  --t-med:.3s ease;
}

/* ---- JUEGO "APPS" (por defecto) ----
   Fraunces + Work Sans. Es el juego de la carta y del panel: Fraunces tiene
   pesos reales (400/600), que es lo que necesitan los títulos chicos y la
   tarjeta impresa del Club.

   Va en `:root, .type-apps` —y no solo en :root— para poder restaurarlo dentro
   de una página que usa el otro juego. Hoy lo usa la tarjeta física del Club:
   la página pasó a Instrument Serif, pero "Café 107" impreso a 26 mm necesita
   una negrita real. Es una lista sola, no una copia de la de :root. */
:root,
.type-apps{
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Work Sans', system-ui, -apple-system, sans-serif;
  /* El peso viaja con la familia porque no todas tienen los mismos. */
  --fw-display:600;
  --fw-display-em:500;
}

/* ---- JUEGO "PORTADA" ----
   Instrument Serif + Outfit, la tipografía con la que se diseñó la portada.
   Se aplica con <body class="type-portada">: hoy, la portada y el Club 107.

   Va en una clase propia y NO dentro de .theme-dark a propósito: el color y la
   tipografía son decisiones separadas. Si mañana una app necesita fondo oscuro,
   hereda los colores sin llevarse la tipografía editorial de la portada.

   Instrument Serif solo existe en peso 400: pedirle 600 haría que el navegador
   fabricara una negrita falsa, que en una serif de display se ve emborronada.
   Por eso --fw-display baja a 400 en este juego, y por eso la tarjeta impresa
   del Club vuelve al juego "apps" con .type-apps. */
.type-portada{
  --font-display:'Instrument Serif', Georgia, serif;
  --font-body:'Outfit', system-ui, -apple-system, sans-serif;
  --fw-display:400;
  --fw-display-em:400;
}

/* Superficie oscura: reasigna los MISMOS roles, no crea colores nuevos. */
.theme-dark{
  --bg:var(--ink-900);
  --surface:var(--ink-800);
  --text:var(--cream-100);
  --text-muted:rgba(246,237,226,.72);
  --text-subtle:rgba(246,237,226,.55);
  --line:rgba(246,237,226,.10);
  --line-strong:rgba(99,199,203,.28);
  --accent:var(--teal-400);
  --accent-hover:var(--teal-300);
  --on-accent:#22140D;
}

@media (max-width:560px){
  :root{--pad-x:14px;}
}