/* =========================================================
   Creative Lab — Color System v1.0
   Order: Primary (black, green) · Secondary (coral)
          · Tertiary (yellow) · Accent (pink, blue) · Neutral (white)
   ========================================================= */
:root {
  /* Primary */
  --cl-black: #000000;   /* text, logo, strong surfaces */
  --cl-green: #AECAB9;   /* PANTONE 559 C */

  /* Secondary */
  --cl-coral: #FF8772;   /* PANTONE 170 C */

  /* Tertiary: the highlighter, always behind black text */
  --cl-yellow: #F7EB62;  /* PANTONE 100 C */

  /* Accent: soft touches only */
  --cl-pink: #EDD3E2;    /* PANTONE 670 C */
  --cl-blue: #ACC9E8;    /* PANTONE 277 C */

  /* Neutral */
  --cl-white: #FFFFFF;   /* page background */
  --cl-green-tint: #E3EEE7; /* the only tint, for soft panels */

  /* Text */
  --cl-ink: var(--cl-black);
  --cl-ink-muted: #4a4a4a;
  --cl-ink-on-black: var(--cl-white);
}

/* Text on color: always black on brand colors, white only on black */
.cl-on-green  { background: var(--cl-green);  color: var(--cl-black); }
.cl-on-coral  { background: var(--cl-coral);  color: var(--cl-black); }
.cl-on-yellow { background: var(--cl-yellow); color: var(--cl-black); }
.cl-on-pink   { background: var(--cl-pink);   color: var(--cl-black); }
.cl-on-blue   { background: var(--cl-blue);   color: var(--cl-black); }
.cl-on-black  { background: var(--cl-black);  color: var(--cl-white); }