/* ============================================================
   RULO3D — Color tokens
   The brand is resolutely monochrome: ink black, paper white,
   and a topographic grayscale ramp sampled from the layered
   mountain artwork. Accessibility ("Accesibilidad") is a core
   value, so contrast is high by default. Functional semantic
   hues are intentionally muted and used sparingly.
   ============================================================ */
:root {
  /* ---- Base ink scale (near-black → paper) ---- */
  --rulo-ink-950: #141414; /* primary brand black, logo ink */
  --rulo-ink-900: #1f1f1f;
  --rulo-ink-800: #2b2b2b;
  --rulo-ink-700: #3d3d3d;
  --rulo-ink-600: #555555;
  --rulo-ink-500: #6f6f6f;
  --rulo-ink-400: #8c8c8c;
  --rulo-ink-300: #b0b0b0;
  --rulo-ink-200: #d4d4d4;
  --rulo-ink-100: #e8e8e8;
  --rulo-ink-50:  #f4f4f4;
  --rulo-white:   #ffffff;

  /* ---- Topographic ramp (sampled from the mountain artwork) ----
     Used for stacked/relief backgrounds, contour fills, charts. */
  --rulo-peak-1: #5f6166; /* darkest back ridge */
  --rulo-peak-2: #76787d;
  --rulo-peak-3: #94969b;
  --rulo-peak-4: #b6b8bc;
  --rulo-peak-5: #d6d8db; /* nearest foothill */
  --rulo-sky:    #f1f2f3; /* haze / page wash */

  /* ---- Functional semantic (muted, used only for status) ---- */
  --rulo-success: #2f6b4f;
  --rulo-warning: #9a6a16;
  --rulo-danger:  #98302a;
  --rulo-info:    #355a78;

  /* ============================================================
     Semantic aliases — reference these in product code
     ============================================================ */
  /* Text */
  --text-strong:   var(--rulo-ink-950);
  --text-body:     var(--rulo-ink-800);
  --text-muted:    var(--rulo-ink-500);
  --text-subtle:   var(--rulo-ink-400);
  --text-inverse:  var(--rulo-white);
  --text-on-accent: var(--rulo-white);

  /* Surfaces */
  --surface-page:    var(--rulo-white);
  --surface-wash:    var(--rulo-sky);
  --surface-card:    var(--rulo-white);
  --surface-sunken:  var(--rulo-ink-50);
  --surface-inverse: var(--rulo-ink-950);

  /* Lines & borders */
  --border-subtle:  var(--rulo-ink-100);
  --border-default: var(--rulo-ink-200);
  --border-strong:  var(--rulo-ink-400);
  --border-contour: var(--rulo-ink-950); /* the brand single-line stroke */

  /* Interactive / brand */
  --accent:          var(--rulo-ink-950);
  --accent-hover:    var(--rulo-ink-800);
  --accent-press:    var(--rulo-ink-700);
  --accent-contrast: var(--rulo-white);
  --focus-ring:      var(--rulo-ink-950);
}