/* alba — Color system
   Two corporate primaries: verd alba (lime green) and lila alba (purple).
   Black & white are the secondary/structural pair.
   Illustrations remain pure black line-art, so colour still stays disciplined:
   green & purple for energy, identity and action; ink for structure & text. */

:root {
  /* ---- Brand green (verd alba) — CORPORATE PRIMARY ---- */
  --alba-green: #c8d300;        /* corporate green — use this as the brand green */
  /* The -600/-700/-300/-100/-050 steps below are NOT corporate colours.
     They are functional variations for SPECIAL OCCASIONS ONLY:
     hover/press states, chart series, a highlighted word, a soft background wash.
     Never present them as "the alba colours". */
  --alba-green-600: #b0ba00;    /* pressed / darker — special use */
  --alba-green-700: #969e00;    /* readable-ish on white — special use */
  --alba-green-300: #e0e86b;    /* hover tint — special use */
  --alba-green-100: #eff3c2;    /* soft fill — special use */
  --alba-green-050: #f7f9e2;    /* palest wash / surface — special use */

  /* ---- Brand purple (lila alba) — CORPORATE PRIMARY ---- */
  --alba-purple: #9175c8;       /* corporate purple */
  /* Steps below = functional variations for special occasions only (see note above). */
  --alba-purple-600: #7a5cb8;   /* pressed / darker — special use */
  --alba-purple-700: #634aa0;   /* text on white — special use */
  --alba-purple-300: #b8a4dd;   /* hover tint — special use */
  --alba-purple-100: #e7dff5;   /* soft fill — special use */
  --alba-purple-050: #f5f1fb;   /* palest wash / surface — special use */

  /* ---- Ink & neutrals ----
     Black is a TYPOGRAPHIC colour: text, line-art illustrations, borders and icons.
     It is NOT a corporate background colour — do not use it for slide backgrounds,
     text pills, cards or large filled areas. Use green, purple, white or a soft
     wash for surfaces instead. Reserve full-black fills for rare, deliberate moments. */
  --ink-900: #000000;           /* corporate black */
  --ink-800: #111111;
  --ink-700: #2c2c2c;
  --ink-500: #5c5c5c;
  --ink-400: #8a8a8a;
  --ink-300: #bcbcbc;
  --ink-200: #e2e2e2;
  --ink-100: #efefef;
  --paper:   #ffffff;           /* corporate white */
  --paper-off: #faf9f4;         /* warm off-white background */

  /* ---- Semantic aliases ---- */
  --color-brand: var(--alba-green);          /* primary action colour */
  --color-brand-hover: var(--alba-green-300);
  --color-brand-active: var(--alba-green-600);

  --color-accent: var(--alba-purple);        /* second primary — the purple */
  --color-accent-hover: var(--alba-purple-300);
  --color-accent-active: var(--alba-purple-600);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-brand: var(--ink-900);           /* black text on green */
  --text-on-accent: var(--paper);            /* white text on purple */
  --text-on-ink: var(--paper);
  --text-inverse: var(--paper);

  --surface-page: var(--paper-off);
  --surface-card: var(--paper);
  --surface-soft: var(--alba-green-050);
  --surface-soft-purple: var(--alba-purple-050);
  --surface-fill: var(--alba-green-100);
  --surface-fill-purple: var(--alba-purple-100);
  --surface-ink: var(--ink-900);   /* DISCOURAGED as a surface — black is for type. Prefer green/purple/paper. */

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-900);

  --focus-ring: var(--ink-900);
}