/* Circulo Mental tokens, sampled from the client's real logos. This is the only
   file that holds literal colors; site.css reads variables. Every text and
   background pair is AA-checked in tests/test_contrast.py.

   One system, four scopes. :root is Circulo Mental (ivory, neutral). The page
   body of each area sits inside <div data-area="..."> (templates/site/layout.html),
   which re-maps the semantic --cnx-* layer. Header and footer sit outside that
   wrapper on purpose: the umbrella chrome is the same on every page.
   Precedence of the brand sources: DESIGN.md. */
:root {
  /* ---- Circulo Mental (logo: cobalt wordmark, navy symbol) ---- */
  --cm-white: #ffffff;
  --cm-ivory: #faf6ef;
  --cm-ivory-2: #f4efe6;            /* the quiet band */
  --cm-cobalt: #004aad;             /* wordmark; text 7.55 on ivory, fill with white 8.13 */
  --cm-cobalt-hover: #003b8c;
  --cm-cobalt-light: #8fb0ff;       /* cobalt as text on navy (8.80) */
  --cm-navy: #00112c;               /* symbol and ink; 17.46 on ivory */
  --cm-muted: #55636a;              /* 5.77 on ivory, 5.43 on ivory-2 */
  --cm-line: #e6dfd3;               /* hairline, decorative */
  --cm-line-2: #dcd3c4;             /* hairline on ivory-2, decorative */
  --cm-line-strong: #7d8a8c;        /* control boundary (3.31 on ivory) */
  --cm-navy-line: #26334f;          /* hairline on navy, decorative */
  --cm-error: #a4281c;              /* error ink on light surfaces */
  --cm-petrol: #276678;             /* the tagline petrol; secondary at most */

  /* ---- ALNUA (logo: orange sun, peach wing, blue wordmark) ---- */
  --al-orange: #ffaa2e;             /* FILL only; navy on top is 9.89 */
  --al-orange-ink: #a85a00;         /* the orange that may be text (4.72 on ivory) */
  --al-peach: #fbe3d2;
  --al-tint: #fff3e8;
  --al-blue: #004aad;
  --al-rule: #f1d2b8;               /* hairline on the tint, decorative */
  --al-border: #f3d7bf;             /* card edge, decorative */
  --al-line: #ebc7ac;               /* divider on peach, decorative */

  /* ---- Scrumpro (logo gradient on the brief's dark cobalt) ---- */
  --sp-night: #0b1a3a;
  --sp-blue: #2e4bd8;               /* gradient stops: the 4px rule only */
  --sp-violet: #9b3fe0;
  --sp-pink: #e040c8;
  --sp-gradient: linear-gradient(90deg, var(--sp-blue), var(--sp-violet), var(--sp-pink)); /* the 4px rule only */
  --sp-violet-light: #b98cff;       /* accent as text on night (6.75) */
  --sp-pink-light: #ff7ad9;         /* 7.39 on night */
  --sp-electric: #6f93ff;
  --sp-muted: #a9b6d3;              /* 8.44 on night */
  --sp-line: #22335c;               /* hairline on night, decorative */
  --sp-line-strong: #5b6e9a;        /* control boundary on night (3.39) */
  --sp-surface: #f2f4f9;            /* Organizaciones, the light tone */
  --sp-surface-line: #d5dbea;
  --sp-violet-deep: #6b2fd0;        /* text and fill on the light tone (6.49) */
  --sp-ink-muted: #4a5675;          /* 6.63 on the light tone */

  /* ---- Original Pirata (the Spotify cover: black, coral, amber, teal) ---- */
  --pi-black: #000000;
  --pi-coral: #f08070;              /* 8.03 on black */
  --pi-amber: #f5b041;              /* 11.17 */
  --pi-teal: #3fc1b0;               /* 9.47 */
  --pi-text: #f3eee6;
  --pi-muted: #a39c92;              /* 7.73 */
  --pi-line: #2b2622;               /* hairline on black, decorative */
  --pi-line-strong: #3a332a;        /* card edge, decorative */
  --pi-field: #8a8379;              /* control boundary on black (5.60) */
  --pi-glow: rgba(240, 128, 112, 0.45); /* the one text-shadow, display words only */

  /* ---- Semantic layer read by the Conexus core and the shell: Circulo Mental ---- */
  --cnx-surface: var(--cm-ivory);
  --cnx-surface-alt: var(--cm-ivory-2);
  --cnx-text: var(--cm-navy);
  --cnx-text-muted: var(--cm-muted);
  --cnx-border: var(--cm-line);
  --cnx-border-input: var(--cm-line-strong);
  --cnx-primary: var(--cm-cobalt);
  --cnx-primary-hover: var(--cm-cobalt-hover);
  --cnx-primary-busy: var(--cm-muted);
  --cnx-on-primary: var(--cm-white);
  --cnx-link: var(--cm-cobalt);
  --cnx-accent: var(--cm-cobalt);
  --cnx-selection: var(--cm-ivory-2);
  --cnx-focus-ring: var(--cm-cobalt);
  --cnx-field-bg: var(--cm-white);
  --cnx-error: var(--cm-error);

  /* ---- Type: Poppins (the wordmark's face) and Newsreader for reading. Self-hosted. ---- */
  --cnx-font-text: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --cnx-font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --cnx-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --cnx-text-weight: 400;
  --cnx-display-weight: 500;
  --cnx-fs-body: 1rem;

  /* ---- Shape, size, rhythm ---- */
  --cnx-radius: 8px;
  --cnx-radius-card: 12px;
  --cnx-touch: 44px;
  --cnx-header-height: 4.75rem;
  --cnx-container-width: 78rem;
  --cnx-gutter: clamp(20px, 4vw, 48px);
  --cnx-section: clamp(72px, 3rem + 5vw, 136px);
}

/* ALNUA: the ambience changes. Peach page, blue actions, serif voice. */
[data-area="alnua"] {
  --cnx-surface: var(--al-tint);
  --cnx-surface-alt: var(--al-peach);
  --cnx-border: var(--al-rule);
  --cnx-primary: var(--al-blue);
  --cnx-primary-hover: var(--cm-cobalt-hover);
  --cnx-link: var(--al-blue);
  --cnx-accent: var(--al-orange);
  --cnx-selection: var(--al-peach);
  --cnx-focus-ring: var(--al-blue);
}

/* Scrumpro: the rhythm changes. Dark cobalt night, light violet and pink accents. */
[data-area="scrumpro"] {
  --cnx-surface: var(--sp-night);
  --cnx-surface-alt: var(--sp-line);
  --cnx-text: var(--cm-white);
  --cnx-text-muted: var(--sp-muted);
  --cnx-border: var(--sp-line);
  --cnx-border-input: var(--sp-line-strong);
  --cnx-primary: var(--sp-violet-light);
  --cnx-primary-hover: var(--sp-pink-light);
  --cnx-primary-busy: var(--sp-muted);
  --cnx-on-primary: var(--sp-night);
  --cnx-link: var(--sp-violet-light);
  --cnx-accent: var(--sp-pink-light);
  --cnx-selection: var(--sp-line);
  --cnx-focus-ring: var(--sp-violet-light);
  --cnx-field-bg: var(--sp-night);
  --cnx-error: var(--sp-pink-light);
}

/* Scrumpro / Organizaciones: another interface, the light tone of the same scope. */
[data-area="scrumpro"][data-tone="light"] {
  --cnx-surface: var(--sp-surface);
  --cnx-surface-alt: var(--cm-white);
  --cnx-text: var(--sp-night);
  --cnx-text-muted: var(--sp-ink-muted);
  --cnx-border: var(--sp-surface-line);
  --cnx-border-input: var(--cm-line-strong);
  --cnx-primary: var(--sp-violet-deep);
  --cnx-primary-hover: var(--sp-night);
  --cnx-primary-busy: var(--sp-ink-muted);
  --cnx-on-primary: var(--cm-white);
  --cnx-link: var(--sp-violet-deep);
  --cnx-accent: var(--sp-violet);
  --cnx-focus-ring: var(--sp-violet-deep);
  --cnx-field-bg: var(--cm-white);
  --cnx-error: var(--cm-error);
}

/* Original Pirata: the language changes. Black, neon coral, amber and teal. */
[data-area="pirata"] {
  --cnx-surface: var(--pi-black);
  --cnx-surface-alt: var(--pi-line);
  --cnx-text: var(--pi-text);
  --cnx-text-muted: var(--pi-muted);
  --cnx-border: var(--pi-line);
  --cnx-border-input: var(--pi-field);
  --cnx-primary: var(--pi-coral);
  --cnx-primary-hover: var(--pi-amber);
  --cnx-primary-busy: var(--pi-muted);
  --cnx-on-primary: var(--pi-black);
  --cnx-link: var(--pi-amber);
  --cnx-accent: var(--pi-coral);
  --cnx-selection: var(--pi-line);
  --cnx-focus-ring: var(--pi-amber);
  --cnx-field-bg: var(--pi-black);
  --cnx-error: var(--pi-coral);
}