/*
 * Grupo Impero — design tokens
 *
 * Base colors were sampled directly from the source flyer
 * ("WhatsApp Image 2026-08-27 at 20.07.39.jpeg") using ImageMagick pixel
 * histograms over solid, non-anti-aliased interior pixels of the headline
 * type and the page background:
 *
 *   --color-navy-500  #021F4A  measured (headline "ACOMPAÑAMOS PROYECTOS."
 *                                and logo strokes; n=15,850 sampled px)
 *   --color-gold-500  #9C7A43  measured (headline "CONSTRUIMOS RELACIONES.";
 *                                n=2,108 sampled px)
 *   --color-cream-100 #F0EFED  measured (page background; n=17,201 sampled px,
 *                                overwhelmingly dominant mode)
 *
 * All other steps in each scale (darker/lighter tints, the neutral grey
 * scale, and the dark-mode palette) are derived from those three measured
 * anchors and are estimated, not sampled from the source.
 *
 * Contrast ratios below were computed with the WCAG 2.x relative-luminance
 * formula (see /assets/preview.html for the same figures rendered as swatches).
 */

:root {
  /* ---------- Navy scale (brand ink) ---------- */
  --color-navy-900: #021024; /* darkest shade */
  --color-navy-700: #021838; /* darker shade */
  --color-navy-500: #021F4A; /* measured base */
  --color-navy-300: #274D86; /* lighter tint */
  --color-navy-100: #7592BD; /* lightest tint */

  /* ---------- Gold scale (brand accent) ---------- */
  --color-gold-900: #674B1E; /* darkest shade — AAA body text on cream (7.02:1) */
  --color-gold-700: #80612D; /* darker shade — AA body text on cream (4.99:1) */
  --color-gold-500: #9C7A43; /* measured base — large/display text only on cream (3.46:1) */
  --color-gold-300: #C7A46B; /* lighter tint — decorative only */
  --color-gold-100: #E0CDAE; /* lightest tint — decorative only */

  /* ---------- Cream / surface scale ---------- */
  --color-cream-50:  #FCFBFA; /* near-white surface (cards on the page bg) */
  --color-cream-100: #F0EFED; /* measured base — page background */
  --color-cream-200: #E7E5E2; /* darker surface (alternating sections) */
  --color-cream-300: #D5D2CD; /* darkest surface step — hairlines/borders */

  /* ---------- Neutral greys (navy-tinted, for UI text) ---------- */
  --color-grey-900: #1F2329; /* primary body text — 13.73:1 on cream-100 */
  --color-grey-700: #49505A; /* secondary text — 7.09:1 on cream-100 */
  --color-grey-600: #606771; /* muted text, contrast-tuned — 4.97:1 on cream-100 */
  --color-grey-400: #788291; /* dark-mode muted text, contrast-tuned — 4.90:1 on navy-900 */
  --color-grey-300: #C9CBCF; /* borders / dividers (non-text) */
  --color-grey-100: #ECEDEE; /* subtle fills */

  /* ---------- Semantic aliases (light, default) ---------- */
  --color-bg: var(--color-cream-100);
  --color-surface: var(--color-cream-50);
  --color-text: var(--color-grey-900);
  --color-text-muted: var(--color-grey-600);
  /* Measured gold (#9C7A43) fails AA for body text on cream (3.46:1 < 4.5:1).
     --color-accent therefore points at the darkened gold-700 (4.99:1) so it
     is safe to use for links/labels/small UI text. Keep --color-gold-500
     itself for large display type (>=24px / 19px bold), where 3.46:1 clears
     the 3:1 large-text threshold — that's exactly how the flyer uses it. */
  --color-accent: var(--color-gold-700);
  --color-accent-display: var(--color-gold-500);
  --color-border: var(--color-cream-300);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-navy-900);
    --color-surface: var(--color-navy-700);
    --color-text: var(--color-cream-50);         /* 18.43:1 on navy-900 */
    --color-text-muted: var(--color-grey-400);    /* 4.90:1 on navy-900 */
    /* Unlike on cream, the measured gold clears AA body-text contrast
       against the near-black navy background (4.79:1), so it can be used
       directly here without a darkened substitute. */
    --color-accent: var(--color-gold-500);        /* 4.79:1 on navy-900 */
    --color-accent-display: var(--color-gold-300);/* 8.12:1 on navy-900 */
    --color-border: #273549;
  }
}