/* Walumar Capotas — Color tokens
   Derived from the brand mark: white/sky-blue "Walumar" + yellow "capotas",
   set on dark industrial surfaces. Blue = trust/engineering, Yellow = energy/
   call-to-action, Dark steel = the factory/utility backbone. */

:root {
  /* ---- Brand core ---------------------------------------------------- */
  --wal-blue-900: #02253f;
  --wal-blue-800: #033a5c;
  --wal-blue-700: #044a82;
  --wal-blue-600: #055699;   /* brand primary */
  --wal-blue-500: #0a6bb3;
  --wal-blue-400: #3d8ec9;
  --wal-blue-300: #7ab3db;
  --wal-blue-200: #b8d4eb;
  --wal-blue-100: #e3eef7;

  --wal-yellow-700: #c9b800;
  --wal-yellow-600: #f2d800;
  --wal-yellow-500: #ffec00;  /* "capotas" yellow */
  --wal-yellow-400: #ffef3d;
  --wal-yellow-200: #fff59e;
  --wal-yellow-100: #fffce0;

  /* ---- Neutrals (steel) --------------------------------------------- */
  --steel-950: #0c1116;   /* deepest background */
  --steel-900: #10161d;   /* primary dark surface (logo lock-up bg) */
  --steel-800: #1b2530;
  --steel-700: #2a3846;
  --steel-600: #3d4e5e;
  --steel-500: #5a6b7a;
  --steel-400: #83919d;
  --steel-300: #adb8c1;
  --steel-200: #d3d9de;
  --steel-100: #e8ebee;
  --steel-50:  #f4f6f7;
  --white:     #ffffff;

  /* ---- Semantic --------------------------------------------------- */
  --success: #3faa4b;
  --success-bg: #eaf6ec;
  --warning: #f2a900;
  --warning-bg: #fff3d6;
  --danger: #d6402c;
  --danger-bg: #fbe9e6;
  --info: var(--wal-blue-600);
  --info-bg: var(--wal-blue-100);

  /* ---- Semantic aliases (surfaces, text, lines) -------------------- */
  --brand-primary: var(--wal-blue-600);
  --brand-primary-hover: var(--wal-blue-700);
  --brand-accent: var(--wal-yellow-500);
  --brand-accent-hover: var(--wal-yellow-600);

  --surface-page: var(--steel-50);
  --surface-card: var(--white);
  --surface-sunken: var(--steel-100);
  --surface-dark: var(--steel-900);
  --surface-dark-2: var(--steel-800);

  --text-strong: var(--steel-900);
  --text-body: var(--steel-700);
  --text-muted: var(--steel-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--steel-300);
  --text-on-accent: var(--steel-900);
  --text-link: var(--wal-blue-600);

  --border-subtle: var(--steel-200);
  --border-strong: var(--steel-300);
  --border-on-dark: var(--steel-700);
  --focus-ring: var(--wal-blue-500);
}