/* ============================================================
   MARKS METALL — COLOR TOKENS
   Dark industrial system: graphite neutrals, white, laser orange.
   Base ramp first, then semantic aliases.
   ============================================================ */
:root {
  /* — Ink / neutral ramp (dark → light) — */
  --ink-1000: #08090A;   /* deepest black — page base */
  --ink-900:  #0D0F11;   /* primary background */
  --ink-850:  #131619;   /* alt section background */
  --ink-800:  #191D21;   /* surface */
  --ink-750:  #1F2429;   /* surface raised */
  --ink-700:  #262C32;   /* card */
  --ink-600:  #313840;   /* card raised / hairline-strong */
  --ink-500:  #3E464F;   /* border */
  --steel-400: #565F69;  /* disabled / faint */
  --steel-300: #7C858F;  /* muted text */
  --steel-200: #A4ADB6;  /* secondary text */
  --steel-100: #CCD3DA;  /* low-emphasis light */
  --paper:     #EEF1F4;  /* primary light text */
  --white:     #FFFFFF;

  /* — Laser orange (brand accent ramp) — */
  --laser-700: #8F3A00;
  --laser-600: #B84A00;  /* pressed / dark hover */
  --laser-500: #D85D00;  /* BRAND primary accent */
  --laser-400: #F26B0E;  /* bright hover */
  --laser-300: #FF8534;  /* highlight / glow core */
  --laser-tint: rgba(216, 93, 0, 0.14);  /* faint fill */

  /* — Spark cyan (laser-cut spark / secondary technical accent, used sparingly) — */
  --spark-500: #38C6E0;
  --spark-tint: rgba(56, 198, 224, 0.12);

  /* — Semantic status — */
  --success-500: #34A56B;
  --warning-500: #E2A23A;
  --danger-500:  #DA4A40;
  --info-500:    #4A90D9;

  /* ===== SEMANTIC ALIASES ===== */
  /* Backgrounds & surfaces */
  --bg-base:        var(--ink-900);
  --bg-deep:        var(--ink-1000);
  --bg-alt:         var(--ink-850);
  --surface:        var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-card:   var(--ink-700);
  --surface-overlay: rgba(13, 15, 17, 0.82);

  /* Text */
  --text-strong:   var(--paper);
  --text-body:     var(--steel-200);
  --text-muted:    var(--steel-300);
  --text-faint:    var(--steel-400);
  --text-on-laser: var(--white);
  --text-inverse:  var(--ink-900);

  /* Accent */
  --accent:        var(--laser-500);
  --accent-hover:  var(--laser-400);
  --accent-press:  var(--laser-600);
  --accent-soft:   var(--laser-tint);

  /* Lines & borders */
  --border:        var(--ink-500);
  --border-soft:   var(--ink-600);
  --border-strong: var(--steel-400);
  --hairline:      rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Focus */
  --focus-ring: rgba(242, 107, 14, 0.55);
}