/* ============================================================
   Compuhelp — Color tokens
   Official brand palette (from colores-compuhelp-100):
     Orange  #ef8e0b   ·  Blue  #0e75ba   ·  Black  #1d1d1b
     Support grays  #474747 · #666666
   Logo leads with BLUE ("compu") + BLACK ("help"); ORANGE is the
   isotipo/accent. So: blue = primary/trust, orange = energy/CTA.
   The signature look is an orange→blue duotone.
   ============================================================ */
:root {
  /* ---- Brand blue (primary) ---- */
  --blue-50:  #e7f2fa;
  --blue-100: #c5dff2;
  --blue-200: #93c3e6;
  --blue-300: #5aa3d6;
  --blue-400: #2986c7;
  --blue-500: #0e75ba;   /* brand blue */
  --blue-600: #0c63a0;
  --blue-700: #0a5083;
  --blue-800: #0b4169;
  --blue-900: #0a3450;

  /* ---- Brand orange (accent / energy) ---- */
  --orange-50:  #fef4e4;
  --orange-100: #fde4bf;
  --orange-200: #fbcd86;
  --orange-300: #f8b44d;
  --orange-400: #f5a128;
  --orange-500: #ef8e0b;  /* brand orange */
  --orange-600: #cf7708;
  --orange-700: #a35e08;
  --orange-800: #7d4a0c;
  --orange-900: #5a360b;

  /* ---- Ink / warm-neutral scale ---- */
  --gray-0:   #ffffff;
  --gray-50:  #f7f7f6;
  --gray-100: #efefee;
  --gray-200: #e3e3e1;
  --gray-300: #cfcfcc;
  --gray-400: #9a9a97;
  --gray-500: #666666;   /* support gray */
  --gray-600: #525250;
  --gray-700: #474747;   /* support gray */
  --gray-800: #2c2c2b;
  --gray-900: #1d1d1b;   /* brand black / ink */

  /* ---- Semantic status ---- */
  --green-100: #d9f3e0;
  --green-500: #2a9d54;
  --green-600: #1f7d41;
  --amber-100: #fdeecb;
  --amber-500: #e0a615;
  --amber-600: #b07f08;
  --red-100:   #fbdede;
  --red-500:   #d83b3b;
  --red-600:   #b32a2a;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  /* Brand */
  --brand-primary: var(--blue-500);
  --brand-primary-hover: var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-accent: var(--orange-500);
  --brand-accent-hover: var(--orange-600);
  --brand-ink: var(--gray-900);

  /* Text */
  --text-strong: var(--gray-900);
  --text-body:   var(--gray-700);
  --text-muted:  var(--gray-500);
  --text-faint:  var(--gray-400);
  --text-on-brand: #ffffff;
  --text-on-dark: #f4f4f3;
  --text-on-dark-muted: #b9bcc0;
  --text-link: var(--blue-600);

  /* Surfaces */
  --surface-page: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--gray-900);
  --surface-inverse-2: var(--gray-800);
  --surface-brand: var(--blue-500);

  /* Borders */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-on-dark: rgba(255,255,255,0.14);

  /* Status */
  --status-success: var(--green-500);
  --status-success-bg: var(--green-100);
  --status-warning: var(--amber-500);
  --status-warning-bg: var(--amber-100);
  --status-danger: var(--red-500);
  --status-danger-bg: var(--red-100);
  --status-info: var(--blue-500);
  --status-info-bg: var(--blue-50);

  /* Focus ring */
  --focus-ring: rgba(14,117,186,0.45);

  /* Signature gradients — orange→blue duotone (use intentionally) */
  --gradient-brand: linear-gradient(118deg, var(--orange-500) 0%, var(--blue-500) 100%);
  --gradient-brand-soft: linear-gradient(118deg, var(--orange-400) 0%, var(--blue-600) 100%);
  --gradient-ink: linear-gradient(120deg, var(--gray-900) 0%, var(--blue-800) 100%);
  /* duotone overlay tint for photography */
  --duotone-overlay: linear-gradient(118deg, rgba(239,142,11,0.62) 0%, rgba(14,117,186,0.66) 100%); /* @kind color */
}