/**
 * @file colors.css
 * Color System variables for AgoraTheme.
 *
 * Extracted from Figma: ADS | Colors ANSR (node 0:1)
 * @see https://www.figma.com/design/VYA2vxNfDc3CCuAkG69a9H/ADS-%7C-Colors-ANSR?node-id=0-1&p=f&m=dev
 *
 * These CSS custom properties follow the design system's color palette and
 * should be used throughout all components to ensure consistency.
 */

:root {
  /* ===========================
   * High Contrast
   * =========================== */
  --color-high-contrast-white: #ffffff;
  --color-high-contrast-dark: #000000;
  --color-high-contrast-black: #000000;

  /* ===========================
   * Base
   * =========================== */
  --color-base-black: #000000;

  /* ===========================
   * Neutral
   * =========================== */
  --color-neutral-50: #f7f8fa;
  --color-neutral-100: #f1f3f8;
  --color-neutral-200: #e1e4ea;
  --color-neutral-300: #cdd2dc;
  --color-neutral-400: #bac0cc;
  --color-neutral-500: #9ca6b8;
  --color-neutral-600: #8893aa;
  --color-neutral-700: #64718b;
  --color-neutral-800: #475164;
  --color-neutral-900: #2b363c;

  /* ===========================
   * Primary
   * =========================== */
  --color-primary-50: #edeff6;
  --color-primary-100: #cad0e4;
  --color-primary-200: #9eaacc;
  --color-primary-300: #7788b6;
  --color-primary-400: #4f669d;
  --color-primary-500: #284584;
  --color-primary-600: #002469;
  --color-primary-700: #001c53;
  --color-primary-800: #00133c;
  --color-primary-900: #000b24;

  /* ===========================
   * Secondary
   * =========================== */
  --color-secondary-50: #f1f5fa;
  --color-secondary-100: #e3eaf4;
  --color-secondary-200: #d4e0f0;
  --color-secondary-300: #c4d5eb;
  --color-secondary-400: #b5cbe7;
  --color-secondary-500: #a4c0e3;
  --color-secondary-600: #94b5e0;
  --color-secondary-700: #6f93c2;
  --color-secondary-800: #4f72a0;
  --color-secondary-900: #335175;

  /* ===========================
   * Informative
   * =========================== */
  --color-informative-50: #e5f6ff;
  --color-informative-100: #e5f6ff;
  --color-informative-200: #a5deff;
  --color-informative-300: #77ceff;
  --color-informative-400: #49bcff;
  --color-informative-500: #0079bf;
  --color-informative-600: #00598c;
  --color-informative-700: #0b486b;
  --color-informative-800: #083752;
  --color-informative-900: #00121c;

  /* ===========================
   * Success
   * =========================== */
  --color-success-50: #e5fff6;
  --color-success-100: #c2f2e2;
  --color-success-200: #7accb1;
  --color-success-300: #36b289;
  --color-success-400: #1f9970;
  --color-success-500: #008558;
  --color-success-600: #00724c;
  --color-success-700: #005539;
  --color-success-800: #013926;
  --color-success-900: #001c13;

  /* ===========================
   * Warning
   * =========================== */
  --color-warning-50: #fff9e5;
  --color-warning-100: #fff2cc;
  --color-warning-200: #ffe699;
  --color-warning-300: #ffe28c;
  --color-warning-400: #ffd966;
  --color-warning-500: #fbcb3c;
  --color-warning-600: #fbbb3c;
  --color-warning-700: #f2a222;
  --color-warning-800: #b06112;
  --color-warning-900: #80460d;

  /* ===========================
   * Danger
   * =========================== */
  --color-danger-50: #fef1f2;
  --color-danger-100: #fee1e3;
  --color-danger-200: #fec8cc;
  --color-danger-300: #fca6ad;
  --color-danger-400: #f8727d;
  --color-danger-500: #de2d3b;
  --color-danger-600: #d12332;
  --color-danger-700: #c41826;
  --color-danger-800: #b20917;
  --color-danger-900: #86131d;

  /* ===========================
   * Text
   * =========================== */
  --color-text-white: #ffffff;
  --color-text-light: #9ca6b8;
  /* Neutral 500 */
  --color-text-medium: #64718b;
  /* Neutral 700 */
  --color-text-dark: #2b363c;
  /* Neutral 900 */
  --color-text-primary-main: #002469;
  /* Primary 600 */
  --color-text-primary-dark: #000b24;
  /* Primary 900 */
  --color-text-link-default: #002469;
  /* Primary 600 */
  --color-text-link-visited: #7d02de;

  /* ===========================
   * Focus
   * =========================== */
  --color-focus-light-background: #000000;
  --color-focus-dark-background: #000000;
}