/* BOOXit — Color tokens
   Brand colors extracted from the logo/icon: Blue #2799D1, Red #E2001A, white arrows.
   Neutrals are a cool "industrial steel" ramp matching the product boxes (gray/black pallet). */
:root {
  /* ---- Base palette ---- */
  --white: #ffffff;
  --black: #0e1114;

  /* BOOXit Blue (primary / brand) */
  --blue-50:  #eaf6fc;
  --blue-100: #cfeaf7;
  --blue-200: #a6d8f0;
  --blue-300: #6fc2e8;
  --blue-400: #45addd;
  --blue-500: #2799d1; /* ← brand blue */
  --blue-600: #1e7cad;
  --blue-700: #175f84;
  --blue-800: #114862;
  --blue-900: #0c3245;

  /* BOOXit Red (signal / accent) */
  --red-50:  #fde8ea;
  --red-100: #fbccd1;
  --red-200: #f79aa4;
  --red-300: #f25b6c;
  --red-400: #ee2c42;
  --red-500: #e2001a; /* ← brand red */
  --red-600: #b80016;
  --red-700: #8a0010;
  --red-800: #61000b;
  --red-900: #3d0007;

  /* Cool steel neutrals (product palette) */
  --gray-50:  #f4f6f8;
  --gray-100: #e7ebef;
  --gray-200: #d2d8de;
  --gray-300: #b4bcc5;
  --gray-400: #8b95a0;
  --gray-500: #6b7078; /* product gray */
  --gray-600: #4b5158;
  --gray-700: #343a40;
  --gray-800: #23282d;
  --gray-900: #04162c;

  /* Status (for dashboards / commerce) */
  --green-500: #2e9e5b;
  --green-700: #1c6b3d;
  --green-50:  #e6f5ec;
  --amber-500: #e8a417;
  --amber-700: #8a6209;
  --amber-50:  #fdf3dd;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-subtle: var(--blue-50);
  --color-on-primary:     var(--white);

  --color-accent:         var(--red-500);
  --color-accent-hover:   var(--red-600);
  --color-accent-active:  var(--red-700);
  --color-accent-subtle:  var(--red-50);
  --color-on-accent:      var(--white);

  --color-success: var(--green-500);
  --color-success-subtle: var(--green-50);
  --color-warning: var(--amber-500);
  --color-warning-subtle: var(--amber-50);
  --color-danger:  var(--red-500);
  --color-danger-subtle: var(--red-50);
  --color-info:    var(--blue-500);

  /* Text */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-400);
  --text-inverse:   var(--white);
  --text-link:      var(--blue-600);
  --text-link-hover:var(--blue-700);
  --text-on-dark:   var(--gray-100);
  --text-on-dark-muted: var(--gray-400);

  /* Surfaces */
  --surface-page:   var(--white);
  --surface-subtle: var(--gray-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--gray-100);
  --surface-dark:   var(--gray-900);
  --surface-dark-raised: var(--gray-800);
  --surface-inverse: var(--gray-900);

  /* Borders / dividers */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-dark:    var(--gray-700);

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