/**
 * Tokens visuales — PERSONAL TEMPS
 * Derivados de DESIGN.md y adaptados a la paleta del logo (azul 65%, verde 25%, blanco 10%).
 */

:root {
  /* Brand & Accent */
  --color-primary: #0099dd;
  --color-primary-bright: #33b0e8;
  --color-primary-deep: #0077b3;
  --color-primary-soft: #d6e8f7;
  --color-accent: #8bc53f;
  --color-accent-deep: #6fa32f;
  --color-accent-soft: #e8f4d4;

  /* Surface */
  --color-canvas: #ffffff;
  --color-paper: #ffffff;
  --color-cloud: #f7f7f7;
  --color-fog: #e8e8e8;
  --color-steel: #c2c2c2;
  --color-hairline: #e8e8e8;

  /* Text */
  --color-ink: #1a1a1a;
  --color-ink-deep: #000000;
  --color-ink-soft: #292929;
  --color-on-ink: #ffffff;
  --color-on-primary: #ffffff;
  --color-charcoal: #3d3d3d;
  --color-graphite: #636363;

  /* Typography — Manrope como sustituto de Forma DJR Micro */
  --font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-display-xxl: 500 3.5rem/1 var(--font-family);
  --font-display-xl: 500 2.75rem/1 var(--font-family);
  --font-display-lg: 500 2.25rem/1 var(--font-family);
  --font-display-md: 500 2rem/1 var(--font-family);
  --font-display-sm: 500 1.5rem/1.17 var(--font-family);
  --font-display-xs: 500 1.25rem/1 var(--font-family);
  --font-body-lg: 400 1.125rem/1.33 var(--font-family);
  --font-body-md: 400 1rem/1.38 var(--font-family);
  --font-body-emphasis: 500 1rem/1.38 var(--font-family);
  --font-caption-md: 400 0.875rem/1.5 var(--font-family);
  --font-caption-sm: 400 0.75rem/1.33 var(--font-family);
  --font-button-md: 600 0.875rem/1.4 var(--font-family);

  /* Spacing */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-xxl: 2rem;
  --space-section: 5rem;

  /* Radius */
  --rounded-none: 0;
  --rounded-md: 4px;
  --rounded-lg: 8px;
  --rounded-xl: 16px;
  --rounded-pill: 9999px;

  /* Elevation */
  --shadow-soft: 0 2px 8px rgba(26, 26, 26, 0.08);
  --shadow-modal: 0 8px 24px rgba(26, 26, 26, 0.12);

  /* Layout */
  --container-max: 1366px;
  --nav-height: 72px;
  --utility-height: 36px;
}

@media (max-width: 767px) {
  :root {
    --space-section: 3rem;
    --font-display-xxl: 500 2.25rem/1 var(--font-family);
    --font-display-xl: 500 2rem/1 var(--font-family);
    --font-display-lg: 500 1.75rem/1 var(--font-family);
  }
}