/*
 * ═══════════════════════════════════════════════════════════
 *  YEFRIS — typography.css  v1.0
 *  03_Tipografía · Validado 28/03/2026
 *  Fuente elegida: Plus Jakarta Sans (variable)
 *
 *  USO:
 *  → App (fotogestion VPS):  /web/static/css/typography.css
 *    Añadir en base.html:    <link rel="stylesheet" href="/static/css/typography.css">
 *  → Web (Astro):            /src/styles/typography.css
 *    Importar en Layout.astro: import '../styles/typography.css';
 *
 *  IMPORTANTE — dos modos de carga (ver sección 1 y 2):
 *  · Web Astro/Netlify → usa Google Fonts CDN (más fácil)
 *  · App VPS           → usa @font-face autoalojado (sin dep. externa)
 * ═══════════════════════════════════════════════════════════
 */


/* ─────────────────────────────────────────────────────────
   1. CARGA VÍA GOOGLE FONTS CDN
   Solo para: Web Astro (yefris.com en Netlify)
   Pegar en el <head> del Layout.astro o en el <style global>
   ───────────────────────────────────────────────────────── */

/*

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">

*/

/* En Astro también puedes importarlo en el <style> del Layout:

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

*/


/* ─────────────────────────────────────────────────────────
   2. @FONT-FACE AUTOALOJADO
   Solo para: App FastAPI en VPS (fotogestion)
   Sin dependencia de Google Fonts en producción.

   PASOS para activarlo:
   1. Ir a https://fonts.google.com/specimen/Plus+Jakarta+Sans
   2. Clic en "Download family"
   3. Extraer los archivos .ttf de la carpeta descargada
   4. Convertir a .woff2 en https://cloudconvert.com/ttf-to-woff2
      (o usar el script Python de abajo)
   5. Subir los 2 archivos a: ~/fotogestion/web/static/fonts/
   6. Descomentar el bloque @font-face de abajo

   ARCHIVOS QUE NECESITAS (solo 2 para todo el sistema):
   · PlusJakartaSans-variable.woff2         (pesos 200–800, normal)
   · PlusJakartaSans-variable-italic.woff2  (pesos 200–800, italic)
   ───────────────────────────────────────────────────────── */

/*

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style:  normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style:  italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-variable-italic.woff2') format('woff2');
}

*/


/* ─────────────────────────────────────────────────────────
   3. APLICAR LA FUENTE — igual para web y app
   Poner en el :root o en el body
   ───────────────────────────────────────────────────────── */

:root {
  --y-font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --y-font-mono:  'JetBrains Mono', 'Fira Code', monospace; /* ya instalado */
}

body {
  font-family: var(--y-font-sans);
  font-size:   14px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─────────────────────────────────────────────────────────
   4. ESCALA TIPOGRÁFICA — 8 niveles
   Custom properties + clases utilitarias
   ───────────────────────────────────────────────────────── */

:root {
  /* Tamaños */
  --y-text-display: 3rem;       /* 48px · hero web */
  --y-text-h1:      2rem;       /* 32px · títulos de sección */
  --y-text-h2:      1.5rem;     /* 24px · subtítulos, modal headers */
  --y-text-h3:      1.125rem;   /* 18px · títulos dentro de cards */
  --y-text-body:    0.875rem;   /* 14px · párrafos, descripciones */
  --y-text-ui:      0.75rem;    /* 12px · labels, inputs, nav */
  --y-text-small:   0.6875rem;  /* 11px · metadata, timestamps */
  --y-text-micro:   0.625rem;   /* 10px · tags, caps, leyendas */

  /* Pesos */
  --y-weight-black:   900;
  --y-weight-bold:    800;
  --y-weight-semibold:700;
  --y-weight-medium:  600;
  --y-weight-regular: 500;
  --y-weight-light:   400;

  /* Interlineado */
  --y-leading-tight:   1.05;
  --y-leading-snug:    1.2;
  --y-leading-normal:  1.5;
  --y-leading-relaxed: 1.65;

  /* Tracking (letter-spacing) */
  --y-tracking-tight:  -0.035em;
  --y-tracking-snug:   -0.025em;
  --y-tracking-normal:  0em;
  --y-tracking-wide:    0.07em;
  --y-tracking-wider:   0.09em;
  --y-tracking-caps:    0.1em;
}


/* ─────────────────────────────────────────────────────────
   5. CLASES UTILITARIAS — listas para usar en templates
   ───────────────────────────────────────────────────────── */

/* Display — solo hero web */
.y-display {
  font-size:      var(--y-text-display);
  font-weight:    var(--y-weight-bold);       /* 800 */
  line-height:    var(--y-leading-tight);
  letter-spacing: var(--y-tracking-tight);
}

/* H1 — títulos de sección web */
.y-h1 {
  font-size:      var(--y-text-h1);
  font-weight:    var(--y-weight-bold);       /* 800 */
  line-height:    var(--y-leading-tight);
  letter-spacing: var(--y-tracking-snug);
}

/* H2 — subtítulos, cabecera de módulos */
.y-h2 {
  font-size:      var(--y-text-h2);
  font-weight:    var(--y-weight-semibold);   /* 700 */
  line-height:    var(--y-leading-snug);
  letter-spacing: var(--y-tracking-snug);
}

/* H3 — títulos dentro de cards, panel headers */
.y-h3 {
  font-size:      var(--y-text-h3);
  font-weight:    var(--y-weight-semibold);   /* 700 */
  line-height:    var(--y-leading-snug);
  letter-spacing: -0.015em;
}

/* Body — párrafos, descripciones */
.y-body {
  font-size:      var(--y-text-body);
  font-weight:    var(--y-weight-light);      /* 400 */
  line-height:    var(--y-leading-relaxed);
  letter-spacing: var(--y-tracking-normal);
}

/* UI — labels, inputs, navegación app */
.y-ui {
  font-size:      var(--y-text-ui);
  font-weight:    var(--y-weight-regular);    /* 500 */
  line-height:    var(--y-leading-normal);
  letter-spacing: var(--y-tracking-normal);
}

/* Small — metadata, timestamps, subtexto */
.y-small {
  font-size:      var(--y-text-small);
  font-weight:    var(--y-weight-regular);    /* 500 */
  line-height:    var(--y-leading-normal);
}

/* Micro — tags, badges, caps, leyendas */
.y-micro {
  font-size:      var(--y-text-micro);
  font-weight:    var(--y-weight-medium);     /* 600 */
  line-height:    var(--y-leading-normal);
  letter-spacing: var(--y-tracking-wide);
}

/* Caps label — "VENTAS HOY", secciones */
.y-caps {
  font-size:      var(--y-text-micro);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--y-tracking-caps);
}

/* Mono — hashes VeriFactu, números ticket, código */
.y-mono {
  font-family:    var(--y-font-mono);
  font-size:      var(--y-text-ui);
  font-weight:    400;
  letter-spacing: 0.02em;
}

/* KPI — número grande en dashboard */
.y-kpi {
  font-size:      1.125rem;     /* 18px base, ajustar por contexto */
  font-weight:    var(--y-weight-black);      /* 900 */
  line-height:    1;
  letter-spacing: -0.02em;
}

/* Gradient text — titulares y valores KPI principales */
.y-gradient {
  background:              linear-gradient(135deg, #2DD4BF 30%, #D4891A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}
/* Nota: en dark mode el amber cambia a #F59E0B — si usas JS para toggle,
   actualiza la variable --y-amber en el selector .dark o [data-theme=dark] */


/* ─────────────────────────────────────────────────────────
   6. RESET TIPOGRÁFICO MÍNIMO
   ───────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--y-font-sans);
  font-weight: var(--y-weight-semibold);
  line-height: var(--y-leading-snug);
  color: inherit;
}

p {
  font-size:   var(--y-text-body);
  line-height: var(--y-leading-relaxed);
}

/* Inputs, buttons — heredan la fuente */
input, button, select, textarea {
  font-family: inherit;
}

/* Strong en párrafos de cuerpo */
strong { font-weight: var(--y-weight-semibold); }


/* ─────────────────────────────────────────────────────────
   7. TAILWIND CDN — extensión tipográfica para la app
   Pegar dentro del tailwind.config en base.html (app FastAPI)
   ───────────────────────────────────────────────────────── */

/*

  fontFamily: {
    sans: ['Plus Jakarta Sans', 'system-ui', '-apple-system', 'sans-serif'],
    mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
  },
  fontWeight: {
    light:    '400',
    regular:  '500',
    medium:   '600',
    semibold: '700',
    bold:     '800',
    black:    '900',
  },

*/


/* ─────────────────────────────────────────────────────────
   8. SCRIPT PYTHON — convertir TTF → WOFF2 en local
   Ejecutar en el VPS o en tu máquina antes de subir las fuentes
   ───────────────────────────────────────────────────────── */

/*

pip install fonttools brotli
python3 -c "
from fontTools.ttLib import TTFont
import os

fonts = [
    'PlusJakartaSans[wght].ttf',
    'PlusJakartaSans-Italic[wght].ttf',
]
for f in fonts:
    tt = TTFont(f)
    out = f.replace('.ttf', '.woff2')
    tt.flavor = 'woff2'
    tt.save(out)
    print(f'Generado: {out}')
"

# Luego subir al VPS:
# scp *.woff2 user@185.207.251.234:~/fotogestion/web/static/fonts/

*/


/* ─────────────────────────────────────────────────────────
   FIN — Yefris typography.css v1.0
   Guardado en: 03_Tipografia / typography.css

   Siguiente paso: 04_Sistema_grafico
   → iconografía, ilustraciones, recursos gráficos Yefris
   ─────────────────────────────────────────────────────────*/
