/*!
 * Alubio Design System · Tokens
 * Plugin: alubio-transparency v1.3.0+
 * Single source of truth for color, typography, spacing, radii, shadows and motion.
 * Do not override individual values inline — extend with a new token instead.
 */
:root {
  /* -- Surface ------------------------------------------------------ */
  --alu-bg:           #F5F3EF;
  --alu-bg-alt:       #EDE9E1;
  --alu-surface:      #FFFFFF;

  /* -- Ink ---------------------------------------------------------- */
  --alu-ink:          #1A1A1A;
  --alu-ink-soft:     rgba(27, 26, 23, 0.78);
  --alu-ink-mute:     rgba(27, 26, 23, 0.55);
  --alu-line:         #D8D2C6;

  /* -- Brand (terracotta quemado, separated from causa-rose) -------- */
  --alu-brand:        #B14622;
  --alu-brand-soft:   #FBE9D6;
  --alu-brand-hover:  #9B3D1D;

  /* -- Causa palettes ---------------------------------------------- */
  /* -ink variant = high-contrast text colour over the matching -soft background */
  --alu-cause-leaf:        #2F6B3E;
  --alu-cause-leaf-soft:   #DCE6DD;
  --alu-cause-leaf-ink:    var(--alu-cause-leaf);    /* deep green already AA on soft */
  --alu-cause-rose:        #C7325A;
  --alu-cause-rose-soft:   #F4D9E1;
  --alu-cause-rose-ink:    var(--alu-cause-rose);    /* AA on rose-soft */
  --alu-cause-sun:         #E8B23A;
  --alu-cause-sun-soft:    #F9ECCB;
  --alu-cause-sun-ink:     #7A5E1A;
  --alu-cause-sky:         #2A5C8F;
  --alu-cause-sky-soft:    #D6E0EA;
  --alu-cause-sky-ink:     var(--alu-cause-sky);     /* AA on sky-soft */

  /* -- Typography -------------------------------------------------- */
  --alu-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --alu-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* -- Spacing scale (4px base) ----------------------------------- */
  --alu-s-1:  4px;
  --alu-s-2:  8px;
  --alu-s-3:  12px;
  --alu-s-4:  16px;
  --alu-s-5:  24px;
  --alu-s-6:  32px;
  --alu-s-7:  48px;
  --alu-s-8:  64px;
  --alu-s-9:  96px;
  --alu-s-10: 128px;

  /* -- Radii ------------------------------------------------------- */
  --alu-r-sm:   4px;
  --alu-r-md:   10px;
  --alu-r-lg:   20px;
  --alu-r-pill: 999px;

  /* -- Shadows ----------------------------------------------------- */
  --alu-sh-1: 0 1px 2px rgba(26, 26, 26, 0.06);
  --alu-sh-2: 0 4px 12px rgba(26, 26, 26, 0.08);
  --alu-sh-3: 0 12px 32px rgba(26, 26, 26, 0.12);

  /* -- Layout ------------------------------------------------------ */
  --alu-container: 1200px;
  --alu-gutter:    32px;

  /* -- Motion ------------------------------------------------------ */
  --alu-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --alu-dur:  220ms;
}

/* -- Cause modifier utility ----------------------------------------
 * Any element carrying .alu-cause-{slug} exposes three custom
 * properties — --alu-cause-color, --alu-cause-soft, --alu-cause-ink —
 * that descendant rules consume to keep cause cascades DRY.
 * Single source of truth for tinted components: cards, badges,
 * association tiles, strips, etc.
 * ----------------------------------------------------------------- */
.alu-cause-leaf {
  --alu-cause-color: var(--alu-cause-leaf);
  --alu-cause-soft:  var(--alu-cause-leaf-soft);
  --alu-cause-ink:   var(--alu-cause-leaf-ink);
}
.alu-cause-rose {
  --alu-cause-color: var(--alu-cause-rose);
  --alu-cause-soft:  var(--alu-cause-rose-soft);
  --alu-cause-ink:   var(--alu-cause-rose-ink);
}
.alu-cause-sun {
  --alu-cause-color: var(--alu-cause-sun);
  --alu-cause-soft:  var(--alu-cause-sun-soft);
  --alu-cause-ink:   var(--alu-cause-sun-ink);
}
.alu-cause-sky {
  --alu-cause-color: var(--alu-cause-sky);
  --alu-cause-soft:  var(--alu-cause-sky-soft);
  --alu-cause-ink:   var(--alu-cause-sky-ink);
}
.alu-cause-neutral {
  --alu-cause-color: var(--alu-ink-soft);
  --alu-cause-soft:  var(--alu-bg-alt);
  --alu-cause-ink:   var(--alu-ink);
}

@media (max-width: 640px) {
  :root {
    --alu-gutter: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --alu-dur: 0ms;
  }
}