/*
  Grupo Attia — Design Tokens
  Sistema visual compartido por todas las páginas del sitio.
*/

:root {
  /* Color */
  --navy: #0f1821;
  --navy-soft: #172433;
  --gold: #d3cdc0;
  --sage: #87947d;
  --neutral: #e4e1db;
  --light-gray: #f5f5f5;
  --ink: #17202a;
  --muted: #68727e;
  --white: #ffffff;

  /* Dark mode (secciones sobre fondo oscuro) */
  --dark-bg: #102834;
  --dark-surface: #151f2a;
  --dark-text: #f5f5f5;
  --dark-muted: #b6c2ca;

  /* Tipografía */
  --font-display: "Literata", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --h1-size: clamp(54px, 8vw, 104px);
  --h2-size: clamp(35px, 5vw, 68px);
  --h3-size: clamp(24px, 3vw, 34px);
  --eyebrow-size: 11px;
  --body-size: clamp(15px, 1vw, 17px);
  --btn-size: 14px;

  /* Layout */
  --container: min(1180px, calc(100% - 40px));
  --radius: 8px;
  --header-height: 72px;
  --shadow: 0 24px 70px rgba(15, 24, 33, 0.14);
  --line: rgba(15, 24, 33, 0.12);
  --transition: 260ms ease;
  --transition-fast: 180ms ease;
}