/* ============================================================
   VIQ ENGLISH — COLOR TOKENS
   Brand: VIQ Blue #2276EC · BrainTalent Orange #FF5A23
   Bright, premium, friendly, educational.
   ============================================================ */
:root {
  /* ---------- VIQ BLUE (primary) ---------- */
  --blue-50:  #EBF2FE;
  --blue-100: #D6E5FD;
  --blue-200: #AECBFB;
  --blue-300: #7FA9F6;
  --blue-400: #4F8BF1;
  --blue-500: #2276EC; /* ★ brand blue */
  --blue-600: #1A5FC4;
  --blue-700: #164EA0;
  --blue-800: #143F80;
  --blue-900: #122F5C;

  /* ---------- BRAINTALENT ORANGE (accent) ---------- */
  --orange-50:  #FFF1EC;
  --orange-100: #FFE1D6;
  --orange-200: #FFC3AE;
  --orange-300: #FF9D7A;
  --orange-400: #FF7A4D;
  --orange-500: #FF5A23; /* ★ brand orange */
  --orange-600: #E8470F;
  --orange-700: #BE3A0D;
  --orange-800: #95300F;
  --orange-900: #6E2710;

  /* ---------- PLAYFUL SUPPORT (use sparingly, accents only) ---------- */
  --sunny-300: #FFE08A;
  --sunny-500: #FFC83D; /* sunshine yellow */
  --sunny-600: #F2A60C;
  --mint-300:  #8FE3BE;
  --mint-500:  #1FB877; /* fresh mint green */
  --mint-600:  #149463;
  --sky-100:   #E9F2FF; /* airy sky wash */

  /* ---------- INK & NEUTRALS (cool, slightly navy for premium) ---------- */
  --white:    #FFFFFF;
  --gray-50:  #F6F8FC;
  --gray-100: #EFF3F8;
  --gray-200: #E2E8F1;
  --gray-300: #CBD4E0;
  --gray-400: #A6B2C4;
  --gray-500: #7C8CA1;
  --gray-600: #5A6B82;
  --gray-700: #33445F;
  --ink-800:  #1F3252;
  --ink-900:  #14233B; /* deepest text ink */

  /* ---------- SEMANTIC STATUS ---------- */
  --success-100: #DBF4E7;
  --success-500: #1FB877;
  --success-700: #149463;
  --warning-100: #FFEFC9;
  --warning-500: #FFB020;
  --warning-700: #B97400;
  --danger-100:  #FDE0DC;
  --danger-500:  #ED4337;
  --danger-700:  #C02A20;
  --info-100:    #D6E5FD;
  --info-500:    #2276EC;
  --info-700:    #164EA0;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */
  /* Brand */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-soft:   var(--blue-50);
  --color-accent:         var(--orange-500);
  --color-accent-hover:   var(--orange-600);
  --color-accent-active:  var(--orange-700);
  --color-accent-soft:    var(--orange-50);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--gray-600);
  --text-subtle:   var(--gray-500);
  --text-on-brand: var(--white);
  --text-link:     var(--blue-600);

  /* Surfaces */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-100);
  --surface-brand:   var(--blue-500);
  --surface-accent:  var(--orange-500);
  --surface-wash:    var(--sky-100);

  /* Lines */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--blue-200);

  /* Focus ring */
  --focus-ring: var(--blue-300);
}