/* ============================================================
   SNAPLYWEB — Color tokens
   Dark by default. High-contrast yellow / black / white,
   with orange as the spark accent.
   ============================================================ */
:root {
  /* ---- Brand primitives (from Paleta de colores.pdf + brand spec) ---- */
  --snaply-yellow:      #FFF301; /* R255 G243 B1 — signature */
  --snaply-yellow-deep: #E6DB00; /* pressed / shadowed yellow */
  --snaply-orange:      #FF7A00; /* spark accent (logo sparkles) */
  --snaply-orange-deep: #E66E00;
  --snaply-black:       #000000;
  --snaply-white:       #FFFFFF;

  /* ---- Ink scale (dark-theme neutrals) ---- */
  --ink-1000: #000000;
  --ink-950:  #060606;
  --ink-900:  #0A0A0A;
  --ink-850:  #0F0F0F;
  --ink-800:  #141414;
  --ink-700:  #1C1C1C;
  --ink-600:  #262626;
  --ink-500:  #333333;
  --ink-400:  #4D4D4D;
  --ink-300:  #737373;
  --ink-200:  #A3A3A3;
  --ink-100:  #D4D4D4;
  --ink-050:  #EDEDED;
  --ink-0:    #FFFFFF;

  /* ---- Alpha overlays (on dark) ---- */
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a16: rgba(255, 255, 255, 0.16);
  --white-a24: rgba(255, 255, 255, 0.24);
  --yellow-a12: rgba(255, 243, 1, 0.12);
  --yellow-a24: rgba(255, 243, 1, 0.24);
  --black-a40: rgba(0, 0, 0, 0.40);
  --black-a64: rgba(0, 0, 0, 0.64);

  /* ---- Status ---- */
  --status-success: #2FD16B;
  --status-warning: #FFB020;
  --status-error:   #FF4D4D;
  --status-info:    #4DA3FF;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */
  /* Surfaces */
  --bg-base:        var(--ink-1000);   /* page background */
  --bg-subtle:      var(--ink-900);    /* alt section */
  --surface-1:      var(--ink-850);    /* base card */
  --surface-2:      var(--ink-800);    /* raised card */
  --surface-3:      var(--ink-700);    /* popover / input */
  --surface-glass:  var(--white-a06);  /* glassmorphism fill */
  --surface-inverse: var(--snaply-white);

  /* Borders */
  --border-subtle:  var(--white-a08);
  --border-default: var(--white-a12);
  --border-strong:  var(--white-a24);
  --border-accent:  var(--snaply-yellow);

  /* Text */
  --text-primary:   var(--snaply-white);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-muted:     rgba(255, 255, 255, 0.42);
  --text-disabled:  rgba(255, 255, 255, 0.28);
  --text-on-accent: var(--snaply-black);    /* black on yellow */
  --text-on-light:  var(--snaply-black);
  --text-link:      var(--snaply-yellow);

  /* Accent */
  --accent:         var(--snaply-yellow);
  --accent-hover:   #FFF94D;
  --accent-press:   var(--snaply-yellow-deep);
  --accent-2:       var(--snaply-orange);
  --accent-2-hover: #FF9433;
  --on-accent:      var(--snaply-black);

  /* Focus */
  --focus-ring:     rgba(255, 243, 1, 0.55);
}