/* ============================================================
   Studio Quattro — Color
   "Estos colores nunca deben perder intensidad."
   El rosa y el azul funcionan como acentos de alto impacto.
   ============================================================ */
:root {
  /* ---- Core brand palette ---- */
  --sq-black:      #262626;  /* Negro        */
  --sq-white:      #F2F2F2;  /* Blanco       */
  --sq-pink:       #FE376A;  /* Rosa Quattro (real, hot) */
  --sq-blue:       #0D05F2;  /* Azul eléctrico */

  /* ---- Warm neutral (editorial paper — seen in real pieces) ---- */
  --sq-cream:      #EFE7DA;
  --sq-cream-deep: #E7DCC9;

  /* ---- Pure extremes (use sparingly; brand prefers softened black/white) ---- */
  --sq-ink:        #0A0A0A;
  --sq-paper:      #FFFFFF;

  /* ---- Neutral ramp (built around the softened black) ---- */
  --sq-neutral-900: #262626;
  --sq-neutral-800: #3A3A3A;
  --sq-neutral-700: #555555;
  --sq-neutral-600: #767676;
  --sq-neutral-500: #9A9A9A;
  --sq-neutral-400: #BEBEBE;
  --sq-neutral-300: #D7D7D7;
  --sq-neutral-200: #E6E6E6;
  --sq-neutral-100: #F2F2F2;

  /* ---- Accent tints (for washes / hovers only — never dilute the mains) ---- */
  --sq-pink-tint:  #FFC9D6;
  --sq-blue-tint:  #CFC9FB;
  --sq-pink-deep:  #C31E4C;
  --sq-blue-deep:  #0A04C2;

  /* ============================================================
     Gradients — TONAL within a single hue (the brand's real system).
     A saturated brand color ramped toward its own dark or light
     extreme. NEVER a pink→blue rainbow.
     ============================================================ */
  --grad-pink:      linear-gradient(140deg, #FE376A 0%, #2C1519 100%); /* @kind other */
  --grad-pink-glow: linear-gradient(140deg, #FFC2D2 0%, #FE376A 100%); /* @kind other */
  --grad-blue:      linear-gradient(140deg, #1E10F0 0%, #08063A 100%); /* @kind other */
  --grad-blue-glow: linear-gradient(140deg, #CFC9FB 0%, #0D05F2 100%); /* @kind other */

  /* ============================================================
     Semantic aliases
     ============================================================ */
  --surface-page:      var(--sq-white);
  --surface-page-warm: var(--sq-cream);
  --surface-ink:       var(--sq-black);
  --surface-card:      var(--sq-paper);
  --surface-card-warm: var(--sq-cream);

  --text-primary:   var(--sq-black);
  --text-inverse:   var(--sq-white);
  --text-muted:     var(--sq-neutral-600);
  --text-accent-pink: var(--sq-pink);
  --text-accent-blue: var(--sq-blue);

  --accent-pink:    var(--sq-pink);
  --accent-blue:    var(--sq-blue);

  --border-subtle:  var(--sq-neutral-300);
  --border-strong:  var(--sq-black);

  --focus-ring:     var(--sq-blue);

  --link:           var(--sq-blue);
  --link-hover:     var(--sq-pink);
}