/* ═══════════════════════════════════════════════════════════
   PUNTTO — DESIGN TOKENS (web)
   Espejo del sistema Flutter (lib/theme/*.dart).
   Toda decisión visual de la web pública vive aquí.
   REGLA DE ORO: nunca uses hex sueltos (#1B4332) o números mágicos
   (padding: 13px) en otros estilos. Siempre var(--color-primary), etc.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────
     PALETA — Dirección "Sereno premium"
     ───────────────────────────────────────────────── */

  /* Marca */
  --color-primary: #1B4332;
  --color-primary-hover: #2D6A4F;
  --color-accent: #C9A961;

  /* Superficies */
  --color-background: #FAF7F2;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F2EFE8;

  /* Textos */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #6B6B6B;
  --color-text-tertiary: #9A9A9A;
  --color-text-on-primary: #FAF7F2;
  /* Crema a media tinta — para trazos sobre verde (el subrayado del enlace
     on-dark). A tinta plena competiria con el propio texto. */
  --color-text-on-primary-soft: rgba(250, 247, 242, 0.5);

  /* Bordes */
  --color-border: #E5DDCA;
  --color-border-strong: #D4CCB8;

  /* Divisores del sistema de LINEAS (Etapa 0 del rediseno). Tintas con
     alfa, no grises opacos: la linea se apoya en el fondo crema en vez
     de pelearse con el. --divider abre la lista, --divider-soft separa
     sus filas, --hover-green confirma la fila sin encender una caja. */
  --color-divider: rgba(26, 26, 26, 0.14);
  --color-divider-soft: rgba(26, 26, 26, 0.08);
  --color-hover-green: rgba(27, 67, 50, 0.04);

  /* Estados semánticos */
  --color-success: #2D6A4F;
  --color-success-subtle: #E3EDE8;
  --color-warning: #B8893E;
  --color-warning-subtle: #F5EDD9;
  --color-danger: #8E3B31;
  --color-danger-subtle: #EFDEDE;
  --color-info: #3D5A6C;
  --color-info-subtle: #E3EAEE;

  /* ─────────────────────────────────────────────────
     TIPOGRAFÍA — Inter (UI) + Fraunces (ceremonial)
     ───────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Tamaños (rem para accesibilidad — escala con preferencias del usuario) */
  --text-overline: 0.6875rem;   /* 11px */
  --text-caption: 0.75rem;      /* 12px */
  --text-body-sm: 0.875rem;     /* 14px */
  --text-button: 0.9375rem;     /* 15px */
  --text-body: 1rem;            /* 16px */
  --text-h3: 1.125rem;          /* 18px */
  --text-h2: 1.375rem;          /* 22px */
  --text-h1: 1.75rem;           /* 28px */
  --text-display: 2rem;         /* 32px */
  --text-display-lg: 2.5rem;    /* 40px */
  --text-display-hero: 3.5rem;  /* 56px — exclusivo de hero web grande */

  /* Pesos (mantenemos solo 3 para coherencia) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Interlineados */
  --line-tight: 1.15;
  --line-snug: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* Tracking (letter-spacing) */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-overline: 0.15em;

  /* ─────────────────────────────────────────────────
     ESPACIADO — múltiplos de 4
     ───────────────────────────────────────────────── */
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 0.75rem;     /* 12px */
  --space-lg: 1rem;        /* 16px */
  --space-xl: 1.5rem;      /* 24px */
  --space-xxl: 2rem;       /* 32px */
  --space-xxxl: 3rem;      /* 48px */
  --space-huge: 4rem;      /* 64px */

  /* ─────────────────────────────────────────────────
     RADIOS
     ───────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ─────────────────────────────────────────────────
     SOMBRAS — sutiles, casi imperceptibles
     ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 2px 8px rgba(26, 26, 26, 0.06);
  --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.08);

  /* Sombra del TOAST — la unica que sobrevive al rediseno. El sistema de
     lineas quito las sombras de tarjetas y listas; el toast es la excepcion
     justificada porque flota sobre contenido que sigue vivo debajo. Por eso
     es mas marcada (14%) que el resto de la escala.
     Espejo de AppShadows.toast en la app Flutter. */
  --shadow-toast: 0 6px 20px rgba(26, 26, 26, 0.14);

  /* ─────────────────────────────────────────────────
     MOVIMIENTO — firma "El Punto" (docs/movimiento.md)
     Una curva, tres tempos. Todo se acomoda con calma,
     y al final cae el punto dorado.
     ───────────────────────────────────────────────── */
  --curva-puntto: cubic-bezier(0.22, 0.9, 0.24, 1); /* arranca decidida, aterriza con calma */
  --tiempo-micro: 180ms;        /* hovers, toques, feedback inmediato */
  --tiempo-medio: 480ms;        /* elementos que entran o cambian de estado */
  --tiempo-ceremonial: 800ms;   /* momentos de marca: reveals, confirmaciones */
  --escalon: 80ms;              /* escalonado entre elementos hermanos */

  /* Alias heredados (no usar en estilos nuevos): apuntan a los tempos
     Puntto para que toda la página adopte el ritmo de marca. */
  --duration-fast: var(--tiempo-micro);
  --duration-normal: var(--tiempo-medio);
  --duration-slow: var(--tiempo-medio);
  --ease-out-expo: var(--curva-puntto);
  --stagger: var(--escalon);

  /* ─────────────────────────────────────────────────
     LAYOUT — anchos máximos
     ───────────────────────────────────────────────── */
  --max-content: 640px;    /* contenedor principal del escaparate */
  --max-prose: 540px;      /* texto largo legible */
}

/* ═══════════════════════════════════════════════════════════
   RESET BASE
   Aplicado al body, headings y links para feedback visual
   inmediato. El refactor pleno de componentes (tarjetas,
   formularios, botones) vive en Fase 8.
   ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Evita que iOS Safari aumente texto al rotar */
  -webkit-text-size-adjust: 100%;
  /* Antialiasing fino — texto se ve más limpio en pantallas Retina */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-normal);
}

/* Headings: Inter por defecto. En Fase 8 elegiremos cuáles van con
   Fraunces (probablemente el nombre del negocio en el hero). */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-snug);
}

/* Links con color de marca y transición sutil */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--tiempo-micro) var(--curva-puntto);
}
a:hover {
  color: var(--color-primary-hover);
}

/* Selección con tono de marca, no el azul default del navegador */
::selection {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* Clase utilitaria para momentos serif ceremoniales (Fase 8 la usaremos
   en el nombre del negocio del escaparate). Ejemplo de uso:
   <h1 class="serif">Estudio Lumière</h1> */
.serif {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-snug);
}