/* ETLO — Color tokens
   Source of truth: ETLO Design System Figma (Color Palette frame + [Core] Colors).
   Primary is a vivid blue (#0085FF). Neutrals are cool grays. Supporting colors
   are green (success), red (danger), yellow/orange (warning). */
:root {
  /* ---- Primary / Blue ---- */
  --blue-50:  #F2F9FF;
  --blue-100: #EDF8FF;
  --blue-200: #D6ECFF;
  --blue-300: #CCE2FF;
  --blue-400: #0085FF;  /* primary main */
  --blue-500: #0876F4;
  --blue-600: #0762EC;
  --blue-700: #0052B4;
  --blue-800: #004080;
  --blue-900: #1C2D47;
  --blue-intro: #1268E3; /* spec-page hero blue */

  /* ---- Neutral / Gray ---- */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFCFF;
  --gray-100: #F4F7FB;
  --gray-200: #EAEEF5;
  --gray-300: #D7DEEA;
  --gray-400: #B7BECD;
  --gray-500: #919FAB; /* grey/500 */
  --gray-600: #8690A2;
  --gray-700: #646E82;
  --gray-800: #25323F;
  --gray-900: #383D48;
  --black:    #1D2731;

  /* ---- Supporting / Green (success) ---- */
  --green-100: #F2FFF3;
  --green-300: #B8EFC0;
  --green-400: #03B351;
  --green-600: #1F8A47;
  --green-900: #2C3C2D;

  /* ---- Supporting / Red (danger) ---- */
  --red-100: #FFF1F1;
  --red-300: #FFC9CC;
  --red-400: #D80027;
  --red-600: #A2001D;
  --red-900: #463333;

  /* ---- Supporting / Yellow + Orange (warning) ---- */
  --yellow-100: #FFF8E6;
  --yellow-300: #FFE39A;
  --yellow-400: #FFCB14;
  --warning-500: #FFAB00;
  --orange-400: #FB9400;
  --orange-600: #EC701F;

  /* ---- Brand accents seen in product (verticals) ---- */
  --violet-400: #7B61FF;  /* docs / lottery accent */
  --facebook:   #1877F2;

  /* ---- Gradients ---- */
  --gradient-blue: linear-gradient(180deg, #2C9AFF 0%, #0085FF 100%); /* @kind color */
  --gradient-blue-soft: linear-gradient(180deg, #EDF8FF 0%, #CCE2FF 100%); /* @kind color */

  /* ---- Transparency scrims ---- */
  --scrim-dark-50:  rgba(6,19,31,0.50);
  --scrim-dark-75:  rgba(6,19,31,0.75);
  --scrim-light-50: rgba(255,255,255,0.50);
  --scrim-light-75: rgba(255,255,255,0.75);
}