/* =========================================================
   Summit College · tokens.css
   Única fuente de colores, tipografía y medidas del sitio.
   Origen: kit-identidad-digital/paleta/colores.txt y
   Guía de Identidad Digital v1.1 (septiembre 2026).
   Regla: ningún otro archivo CSS declara colores en hexadecimal;
   los componentes usan los roles semánticos (--color-*).
   ========================================================= */
:root {
  /* --- Paleta institucional (nombres oficiales del kit) --- */
  --sc-green:       #03442E; /* Verde Summit: fondos, encabezados, escudo */
  --sc-green-deep:  #022D1F; /* Verde profundo: sombras, capas, degradados */
  --sc-gold:        #DFB44B; /* Dorado Summit: acentos, filetes, botones. NUNCA texto sobre blanco */
  --sc-gold-light:  #F0D696; /* Dorado claro: subtítulos y apoyos sobre verde */
  --sc-cream:       #F8F5ED; /* Crema: fondos claros y piezas informativas */
  --sc-ink:         #1A211E; /* Tinta: texto principal sobre fondos claros */
  --sc-gray:        #6E7672; /* Gris texto: secundario; sobre crema solo desde 18 px */
  --sc-white:       #FFFFFF; /* Blanco: fondos y texto sobre verde */

  /* --- Roles semánticos (usar estos en componentes y páginas) --- */
  --color-bg:            var(--sc-cream);
  --color-surface:       var(--sc-white);
  --color-text:          var(--sc-ink);
  --color-text-muted:    var(--sc-gray);
  --color-brand:         var(--sc-green);
  --color-brand-deep:    var(--sc-green-deep);
  --color-on-brand:      var(--sc-white);
  --color-on-brand-soft: var(--sc-gold-light);
  --color-accent:        var(--sc-gold);
  --color-accent-soft:   var(--sc-gold-light);
  --color-link:          var(--sc-green);
  --overlay-photo:       rgb(2 45 31 / 0.45); /* capa verde mínima (45 %) para texto sobre fotografía */

  /* --- Tipografía (escala web de la guía, p. 7) --- */
  --font-display: "Cinzel", "Marcellus", Georgia, serif;  /* solo títulos cortos; nunca < 16 px ni texto corrido */
  --font-body:    "Inter", "Segoe UI", Arial, sans-serif;

  --fs-h1:    clamp(2rem, 1.4rem + 2.4vw, 2.75rem);    /* 44 px en escritorio */
  --fs-h2:    clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); /* 30 px */
  --fs-h3:    1.3125rem; /* 21 px · Inter SemiBold */
  --fs-body:  1.0625rem; /* 17 px · Inter Regular */
  --fs-small: 0.875rem;  /* 14 px · apoyos y pies */
  --fs-label: 0.75rem;   /* 12 px · antetítulos / etiquetas */

  --lh-h1: 1.15;   --lh-h2: 1.2;     --lh-h3: 1.35;
  --lh-body: 1.65; --lh-small: 1.55; --lh-label: 1.4;

  --ls-label:  0.22em; /* antetítulos en versalitas */
  --ls-button: 0.12em; /* botón principal */

  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;

  /* --- Forma (elementos de interfaz de la guía, p. 9) --- */
  --radius-card: 12px;
  --radius-pill: 999px;
  --card-top-rule: 3px solid var(--sc-gold);
  --btn-secondary-border: 1.5px solid var(--sc-white);

  /* --- Espacio y layout --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem; --space-9: 6rem;
  --gutter: 1rem;      /* margen lateral mínimo en móvil (16 px) */
  --container: 72rem;  /* ancho máximo del contenido */
  --measure: 65ch;     /* ancho máximo de un párrafo */

  /* --- Escudo (área de respiro y mínimos, guía p. 4) --- */
  --logo-min-height: 32px;    /* escudo en pantalla */
  --logo-h-min-width: 140px;  /* composición horizontal en pantalla */

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* --- Añadidos en E3 (diseño). Ningún color nuevo: solo la paleta con
     transparencia o medidas que la guía no fija. --- */
  --container-wide: 80rem;   /* cabecera y pie: 1280 px para que ocho enlaces + botón quepan en una línea a 1200 px (E2 §6) */
  --radius-field: 8px;       /* campos de formulario: radio menor que la tarjeta (12 px) para que no se lean como tarjetas */
  --line-on-light: rgb(3 68 46 / 0.16);     /* filete de 1 px sobre crema o blanco: Verde Summit al 16 %; el gris de texto a 1 px se ve sucio */
  --line-on-brand: rgb(255 255 255 / 0.18); /* filete de 1 px sobre verde: blanco al 18 %; separa cabecera/hero y los ítems del menú móvil */
  --surface-on-brand: rgb(255 255 255 / 0.06); /* caja de reserva de imagen sobre verde: apenas más clara que el fondo */
  --shadow-float: 0 6px 18px rgb(2 45 31 / 0.22); /* única sombra del sitio: el botón flotante, que sí flota; verde profundo con alfa */
}