/* ============================================================
   Videorize — Color Tokens
   Brand electric blue + ink, disciplined neutrals + semantics.
   ============================================================ */
:root {
  /* ---- Brand: Electric Blue ---- */
  --blue-50:  #eef9fe;
  --blue-100: #d6f0fc;
  --blue-200: #aee2f9;
  --blue-300: #7dd4f6;
  --blue-400: #33bef2;
  --blue-500: #00adee; /* core brand */
  --blue-600: #0090c7;
  --blue-700: #00729e;
  --blue-800: #015674;
  --blue-900: #063f54;

  /* ---- Ink (brand near-black) ---- */
  --ink-950: #141112;
  --ink-900: #1a1718;
  --ink-800: #231f20; /* brand ink — primary text */
  --ink-700: #3a3536;
  --ink-600: #565051;

  /* ---- Neutrals (cool gray) ---- */
  --white:    #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f3;
  --gray-200: #e1e4e9;
  --gray-300: #cbd0d8;
  --gray-400: #9aa1ac;
  --gray-500: #6c737f;
  --gray-600: #4a4f58;
  --black:    #000000;

  /* ---- Semantic hues ---- */
  --green-500:  #10b981;
  --green-50:   #e7f8f1;
  --amber-500:  #f5a623;
  --amber-50:   #fdf3e2;
  --red-500:    #ef4444;
  --red-50:     #fdecec;

  /* ============ Semantic aliases ============ */
  /* Text */
  --text-primary:   var(--ink-800);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-inverse:   var(--white);
  --text-brand:     var(--blue-600);
  --text-on-brand:  var(--white);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-muted:   var(--gray-100);
  --surface-card:    var(--white);
  --surface-dark:    var(--ink-800);
  --surface-darker:  var(--ink-950);
  --surface-brand:   var(--blue-500);

  /* Borders */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-brand:   var(--blue-500);
  --border-dark:    var(--ink-700);

  /* Accent (interactive) */
  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-600);
  --accent-active:  var(--blue-700);
  --accent-subtle:  var(--blue-50);
  --accent-contrast:var(--white);

  /* Semantic feedback */
  --success:      var(--green-500);
  --success-bg:   var(--green-50);
  --warning:      var(--amber-500);
  --warning-bg:   var(--amber-50);
  --error:        var(--red-500);
  --error-bg:     var(--red-50);
  --info:         var(--blue-500);
  --info-bg:      var(--blue-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 45%, transparent);
}