/* ============================================================
   Rocketronics — Color tokens
   Brand: White, Blue (#428bca), Red (#e31e25).
   The logo wordmark runs a deep-navy → bright-azure gradient;
   the rocket mark is bright azure; the lightning bolt is red.
   ============================================================ */
:root {
  /* ---- Brand blues ---- */
  --blue-900: #14315c;   /* deepest navy — wordmark start, headings on light */
  --blue-800: #1d4a86;
  --blue-700: #2456a0;
  --blue-600: #3573b3;
  --blue-500: #428bca;   /* PRIMARY brand blue */
  --blue-400: #29abe2;   /* bright azure — the rocket mark */
  --blue-300: #6fc3ec;
  --blue-200: #a9dbf4;
  --blue-100: #d6eefa;
  --blue-50:  #eef8fd;

  /* ---- Brand red (lightning / accent / sale / danger) ---- */
  --red-700: #a8161b;
  --red-600: #c4191f;
  --red-500: #e31e25;    /* PRIMARY brand red */
  --red-400: #ee4b51;
  --red-300: #f58a8e;
  --red-100: #fcdedf;
  --red-50:  #fef2f2;

  /* ---- Neutrals (cool gray, slight blue cast) ---- */
  --white:   #ffffff;
  --gray-50:  #f6f8fa;
  --gray-100: #eef1f4;
  --gray-200: #dfe4ea;
  --gray-300: #c7cfd8;
  --gray-400: #9aa6b2;
  --gray-500: #6b7785;
  --gray-600: #4d5763;
  --gray-700: #353d47;
  --gray-800: #232a32;
  --gray-900: #161b21;
  --black:    #0d1014;

  /* ---- Functional ---- */
  --green-500: #2a9d57;  /* success / "in stock" / confirm jobs */
  --green-100: #dcf3e5;
  --amber-500: #e8a33d;  /* warning / waiting / caution */
  --amber-100: #fbeccf;

  /* ---- estlcamCNC.de sub-brand palette ----
     A reseller micro-site ("Angeboten von Rocketronics.de"). Shares the
     brand blue but adds a green "buy" CTA, a colder ink scale, and a
     dark footer. See ui_kits/estlcamcnc/ and the CTA Hierarchy card. */
  --green-cta:       #198c21;  /* Action Green — primary "buy / order" CTA */
  --green-cta-hover: #14751b;
  --red-alert:       #c20400;  /* Alert Red — sale badges & notices on this site */
  --navy-ink:        #1a2a3a;  /* Deep Navy — headings on estlcamCNC */
  --ink:             #060d14;  /* Near Black — body copy on estlcamCNC */
  --off-white:       #fafdff;  /* alternating section background */
  --footer-bg:       #343538;  /* dark footer */
  --footer-text:     #cccccc;
  --info-tint:       #e8f0fe;  /* info / hint box background */
  --steel:           #eeeeee;  /* dividers & card borders */
  --blue-link-hover: #2a6496;  /* nav + link hover */

  /* ---- Brand gradients ---- */
  --grad-wordmark: linear-gradient(100deg, var(--blue-900) 0%, var(--blue-500) 55%, var(--blue-400) 100%);
  --grad-blue:     linear-gradient(180deg, var(--blue-400) 0%, var(--blue-600) 100%);
  --grad-blue-soft:linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);

  /* ============ Semantic aliases ============ */
  --bg-page:        var(--white);
  --bg-subtle:      var(--gray-50);
  --bg-muted:       var(--gray-100);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-invert: var(--blue-900);

  --text-strong:    var(--gray-900);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-invert:    var(--white);
  --text-link:      var(--blue-500);
  --text-link-hover:var(--blue-700);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);

  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-600);
  --accent-press:   var(--blue-700);
  --accent-soft:    var(--blue-50);

  --danger:         var(--red-500);
  --danger-hover:   var(--red-600);
  --danger-soft:    var(--red-50);

  --success:        var(--green-500);
  --warning:        var(--amber-500);

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