/*
  LOGO THEME
  Change only these values when the logo palette changes.
  Every interface color below is generated from them.
*/
:root {
  --logo-blue: #22b4d6;
  --logo-pink: #f39ab7;
  --logo-silver: #c0c0c0;
  --logo-ivory: #f7efe6;
  --logo-gold: #b98246;

  /* Generated brand shades */
  --brand-blue: var(--logo-blue);
  --brand-blue-dark: color-mix(in srgb, var(--logo-blue) 42%, #032d39);
  --brand-blue-deep: color-mix(in srgb, var(--logo-blue) 24%, #02232c);
  --brand-blue-light: color-mix(in srgb, var(--logo-blue) 35%, #ffffff);
  --brand-blue-soft: color-mix(in srgb, var(--logo-blue) 13%, var(--logo-ivory));

  --brand-pink: var(--logo-pink);
  --brand-pink-dark: color-mix(in srgb, var(--logo-pink) 45%, #642039);
  --brand-pink-deep: color-mix(in srgb, var(--logo-pink) 25%, #451326);
  --brand-pink-light: color-mix(in srgb, var(--logo-pink) 38%, #ffffff);
  --brand-pink-soft: color-mix(in srgb, var(--logo-pink) 14%, var(--logo-ivory));

  --brand-silver: var(--logo-silver);
  --brand-silver-dark: color-mix(in srgb, var(--logo-silver) 42%, #30353a);
  --brand-silver-deep: color-mix(in srgb, var(--logo-silver) 24%, #23272b);
  --brand-silver-light: color-mix(in srgb, var(--logo-silver) 35%, #ffffff);

  --brand-ivory: var(--logo-ivory);
  --brand-ivory-dark: color-mix(in srgb, var(--logo-ivory) 76%, var(--logo-silver));
  --brand-ivory-light: color-mix(in srgb, var(--logo-ivory) 42%, #ffffff);
  --brand-blend: color-mix(in srgb, var(--logo-blue) 52%, var(--logo-pink));
  --brand-blend-dark: color-mix(in srgb, var(--brand-blend) 35%, #443147);
  --brand-gold: var(--logo-gold);
  --brand-gold-dark: color-mix(in srgb, var(--logo-gold) 66%, #543419);
  --brand-gold-soft: color-mix(in srgb, var(--logo-gold) 13%, var(--logo-ivory));

  /* Semantic interface tokens */
  --ink: color-mix(in srgb, #17191d 88%, var(--logo-blue));
  --muted: color-mix(in srgb, var(--ink) 60%, var(--logo-silver));
  --line: color-mix(in srgb, var(--logo-silver) 48%, var(--brand-gold-soft));
  --paper: color-mix(in srgb, #ffffff 94%, var(--logo-ivory));
  --soft: var(--logo-ivory);
  --sky: var(--brand-blue-soft);
  --blue: var(--brand-blue);
  --blue-dark: var(--brand-blue-dark);
  --pink: var(--brand-pink);
  --pink-dark: var(--brand-pink-dark);
  --pink-soft: var(--brand-pink-soft);
  --yellow: var(--brand-ivory-dark);
  --green: var(--brand-blue);

  --brand-gradient: linear-gradient(105deg, var(--brand-blue-dark), var(--brand-pink-dark));
  --page-gradient: linear-gradient(180deg, var(--brand-ivory-light) 0%, var(--brand-blue-soft) 46%, var(--paper) 100%);
  --blue-shadow: color-mix(in srgb, var(--brand-blue) 24%, transparent);
  --pink-shadow: color-mix(in srgb, var(--brand-pink) 26%, transparent);
  --surface-shadow: color-mix(in srgb, var(--ink) 12%, transparent);
  --focus-ring: var(--brand-blue-deep);
  --shadow: 0 18px 45px var(--surface-shadow);

  /* External platform colors stay true to their brands. */
  --whatsapp-green: #25d366;
  --whatsapp-green-dark: #1ebe5d;
  --facebook-blue: #1877f2;
}