/* ============================================================
   GECKO — Repuestos para autos · Panamá
   Brand tokens (shared across logo / web / social)
   ============================================================ */

:root {
  /* Core palette ------------------------------------------- */
  --ink:        #15161A;   /* near-black, slightly cool      */
  --ink-2:      #20222A;
  --ink-3:      #2D3038;
  --red:        #E4002B;   /* primary automotive red         */
  --red-deep:   #B50022;
  --red-bright: #FF2440;

  --paper:      #F2F1ED;   /* warm off-white surface         */
  --paper-2:    #E7E5DF;
  --paper-3:    #DAD8D1;
  --white:      #FBFAF8;

  --steel:      #8B8E96;   /* mid gray                       */
  --steel-2:    #5A5D66;

  --line:       rgba(20,21,26,.12);
  --line-2:     rgba(20,21,26,.22);
  --line-dk:    rgba(255,255,255,.14);

  /* Type --------------------------------------------------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, monospace;

  /* Radii / shadow ---------------------------------------- */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;
  --shadow: 0 1px 2px rgba(20,21,26,.06), 0 8px 24px rgba(20,21,26,.08);
  --shadow-lg: 0 24px 60px rgba(20,21,26,.16);
}

/* Hazard tape — signature brand texture (red/black diagonal) */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 14px,
    var(--red) 14px 28px
  );
}
.hazard-thin {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 7px,
    var(--red) 7px 14px
  );
}

/* Striped image placeholder ------------------------------- */
.ph {
  position: relative;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(20,21,26,.05) 0 10px,
    rgba(20,21,26,0) 10px 20px
  );
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--steel-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph::after {
  content: attr(data-label);
  padding: 4px 8px;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  background: rgba(255,255,255,.5);
}

* { box-sizing: border-box; }