/* ============================================================
   APPOSITE — COLOR TOKENS
   Source: Apposite brand guideline — Colour Palette / Primary /
   Neutral / Accent / Gradient Palette specimens.
   ============================================================ */

:root {
  /* ---- Base palette (named per brand guide) ---- */
  --color-white: #FFFFFF;
  --color-picton-blue: #33AFE4;   /* primary — blue */
  --color-razzmatazz: #EA0E6C;    /* primary — pink/magenta */
  --color-pear: #D0DB28;          /* primary — yellow-green */
  --color-supernova: #FFC709;     /* primary — amber */
  --color-emperor: #505050;       /* neutral — dark gray */

  /* ---- Neutral ramp ---- */
  --color-gray: #808285;
  --color-black: #000000;

  /* ---- Accent (secondary/supporting colors) ---- */
  --color-teal: #006967;
  --color-red-orange: #ED3E24;

  /* ---- Gradient (the signature "O" mark treatment) ---- */
  --gradient-brand: linear-gradient(90deg, #33AFE4 0%, #EA0E6C 100%); /* @kind color */
  --gradient-brand-diag: linear-gradient(135deg, #33AFE4 0%, #EA0E6C 100%); /* @kind color */

  /* ================= Semantic aliases ================= */
  --color-primary: var(--color-picton-blue);
  --color-secondary: var(--color-razzmatazz);

  --surface-page: var(--color-white);
  --surface-inverse: var(--color-black);
  --surface-card: var(--color-white);
  --surface-sunken: #F4F4F5;

  --border-default: #E2E2E4;
  --border-strong: var(--color-gray);

  --text-primary: var(--color-black);
  --text-secondary: var(--color-emperor);
  --text-muted: var(--color-gray);
  --text-inverse: var(--color-white);
  --text-link: var(--color-picton-blue);

  --state-success: var(--color-teal);
  --state-danger: var(--color-red-orange);
  --state-warning: var(--color-supernova);
  --state-info: var(--color-picton-blue);
}