/* WeCreate color tokens.
   Source of truth: wecreateio/design-tokens (src/designs/Palette.figma.ts)
   + consumer-ui-web lib/theme.ts & util/theme.ts (semantic mapping). */

:root {
  /* ---- Base scales ---- */
  /* Petrol (brand primary) */
  --petrol-900: #003145;
  --petrol-800: #00465d;
  --petrol-700: #005972;
  --petrol-600: #186d89;
  --petrol-500: #287c9a;
  --petrol-400: #4b8fac;
  --petrol-300: #67a4bf;
  --petrol-200: #8bc0d8;
  --petrol-100: #acdcf0;
  --petrol-50: #cff3ff;

  /* Lime (brand secondary) */
  --lime-900: #266300;
  --lime-800: #4f8400;
  --lime-700: #649700;
  --lime-600: #79ab0d;
  --lime-500: #89ba17;
  --lime-400: #9bc444;
  --lime-300: #aece68;
  --lime-200: #c5dc94;
  --lime-100: #ddeabe;
  --lime-50: #f1f7e5;

  /* Red (error) */
  --red-900: #732f43;
  --red-800: #99374c;
  --red-700: #ae3c50;
  --red-600: #c34255;
  --red-500: #d34757;
  --red-400: #da576c;
  --red-300: #e26f84;
  --red-200: #eb95a6;
  --red-100: #f3bec9;
  --red-50: #fae5e9;

  /* Gray (neutral, Material scale) */
  --gray-900: #212121;
  --gray-800: #424242;
  --gray-700: #616161;
  --gray-600: #757575;
  --gray-500: #9e9e9e;
  --gray-400: #bdbdbd;
  --gray-300: #e0e0e0;
  --gray-200: #eeeeee;
  --gray-100: #f5f5f5;
  --gray-50: #fafafa;

  /* Alpha ramps */
  --white-100: #ffffff;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-10: rgba(255, 255, 255, 0.1);
  --black-100: #000000;
  --black-90: rgba(0, 0, 0, 0.9);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-10: rgba(0, 0, 0, 0.1);

  /* ---- Semantic (light palette) ---- */
  --color-primary: var(--petrol-500);
  --color-primary-light: var(--petrol-200);
  --color-primary-dark: var(--petrol-800);
  --color-primary-contrast: var(--white-100);

  --color-secondary: var(--lime-500);
  --color-secondary-light: var(--lime-200);
  --color-secondary-dark: var(--lime-800);
  --color-secondary-contrast: var(--white-100);

  --color-error: var(--red-500);
  --color-error-light: var(--red-200);
  --color-error-dark: var(--red-800);
  --color-error-contrast: var(--white-100);

  --text-primary: var(--black-90);
  --text-secondary: var(--black-60);
  --text-disabled: var(--black-40);

  --surface-default: #fafafa;
  --surface-paper: #ffffff;
  --divider: rgba(0, 0, 0, 0.12);

  /* Chat bubbles (util/theme.ts custom palette) */
  --chat-bubble-own: var(--lime-50);
  --chat-bubble-other: var(--gray-200);

  /* Brand gradient (logo: petrol 500 → lime 500) */
  --gradient-brand: linear-gradient(135deg, #287c9a 0%, #89ba17 100%); /* @kind color */
}

/* ---- Dark palette scope ---- */
[data-theme='dark'] {
  --color-primary: var(--petrol-200);
  --color-primary-light: var(--petrol-50);
  --color-primary-dark: var(--petrol-400);
  --color-primary-contrast: var(--black-90);

  --color-secondary: var(--lime-200);
  --color-secondary-light: var(--lime-50);
  --color-secondary-dark: var(--lime-400);
  --color-secondary-contrast: var(--black-90);

  --color-error: var(--red-300);
  --color-error-light: var(--red-100);
  --color-error-dark: var(--red-500);
  --color-error-contrast: var(--black-90);

  --text-primary: var(--white-100);
  --text-secondary: var(--white-70);
  --text-disabled: var(--white-50);

  --surface-default: #303030;
  --surface-paper: #424242;
  --divider: rgba(255, 255, 255, 0.12);

  --chat-bubble-own: #102900;
  --chat-bubble-other: var(--gray-700);
}