/* Vytal color tokens -------------------------------------------------------
   From the Vytal Brand Design guide (June 2024).
   Primary  = Black + Vhyte  (serious, premium, reduced — first layer)
   Secondary = Green, Lylac, Red  (emotional, attention-grabbing — accents,
               image backgrounds, badges, the V/peace icon)
   Each sub-brand carries its own secondary colour (see --brand-* below).
   ------------------------------------------------------------------------ */

:root {
  /* ---- Raw brand palette (exact values from the guide) ---- */
  --vytal-black: #1C1A20;        /* RGB 28/26/32  */
  --vytal-vhyte: #F5F5F5;        /* RGB 245/245/245 — "Vhyte", the off-white */
  --vytal-light-grey: #E6E6E6;   /* RGB 230/230/230 */
  --vytal-green: #1CC282;        /* RGB 28/194/130 */
  --vytal-lylac: #CC99FF;        /* RGB 204/153/255 */
  --vytal-red: #DC5A38;          /* RGB 220/90/56 */
  --vytal-track-blue: #8CC9FF;   /* Vytal TRACK module blue (Vytal.ONE) */
  --vytal-ware-turquoise: #6FC7C0;/* Vytal WARE module turquoise (Vytal.ONE) */
  --pure-white: #FFFFFF;

  /* ---- Tints / shades (derived, for hovers & soft fills) ---- */
  --vytal-black-90: #2A2830;
  --vytal-black-80: #3A3842;
  --green-dark: #15A36C;         /* green hover / active */
  --green-soft: #E2F7EF;         /* soft success / sustainability fill */
  --lylac-soft: #F1E6FF;
  --red-dark: #C44827;           /* red hover / active */
  --red-soft: #FBE7E0;

  /* ================= Semantic aliases ================= */

  /* Backgrounds */
  --surface-default: var(--vytal-vhyte);   /* page background — warm off-white */
  --surface-pure: var(--pure-white);       /* cards on vhyte, crisp panels */
  --surface-soft: var(--vytal-light-grey); /* section tint, form fields */
  --surface-strong: var(--vytal-black);    /* dark sections, footer, hero */
  --surface-card: var(--pure-white);

  /* Text */
  --text-primary: var(--vytal-black);
  --text-secondary: #6B6970;                /* muted body / captions on light */
  --text-tertiary: #9A98A0;
  --text-inverted: var(--vytal-vhyte);      /* text on black */
  --text-inverted-muted: #B7B5BC;
  --text-disabled: #ABABAB;
  --text-accent: var(--green-dark);

  /* Borders */
  --border-default: #DEDCE0;
  --border-strong: #C4C2C8;
  --border-inverted: rgba(245,245,245,0.18);
  --border-focus: var(--vytal-black);

  /* Brand / accent roles */
  --brand-primary: var(--vytal-black);
  --brand-accent: var(--vytal-green);

  /* CTA */
  --cta-bg: var(--vytal-black);
  --cta-bg-hover: var(--vytal-black-80);
  --cta-text: var(--vytal-vhyte);

  /* Status */
  --status-success: #1CC282;
  --status-success-fg: #0E6E47;
  --status-warning: #E6A23C;
  --status-error: var(--vytal-red);
  --status-info: var(--vytal-track-blue);

  /* Sub-brand colors (Vytal.ONE family) */
  --brand-one: var(--vytal-black);
  --brand-play: var(--vytal-red);
  --brand-track: var(--vytal-track-blue);
  --brand-ware: var(--vytal-ware-turquoise);
  --brand-service: var(--vytal-lylac);
}