/* ==========================================================================
   Yendra Digital — Color System
   Cool tech-slate. Deep navy/slate backgrounds (never warm black) with a
   single emerald accent. Restrained, confident, crafted.
   ========================================================================== */

:root {
  /* ---- Slate (cool, blue-undertone neutral ramp) ------------------------ */
  --slate-950: #080B11;   /* deepest field — page void               */
  --slate-925: #0B0F17;   /* app background                          */
  --slate-900: #0E131D;   /* primary surface                         */
  --slate-850: #131926;   /* raised surface                          */
  --slate-800: #1A2130;   /* card                                    */
  --slate-750: #212A3B;   /* card hover / inset divider              */
  --slate-700: #2A3447;   /* strong border                           */
  --slate-600: #3A4659;   /* hairline on light, disabled stroke      */
  --slate-500: #515E74;   /* faint icon                              */
  --slate-400: #6E7B92;   /* muted text                              */
  --slate-300: #98A3B7;   /* secondary text                          */
  --slate-200: #C2CAD8;   /* primary text (dimmed)                   */
  --slate-100: #DEE3EC;   /* primary text                            */
  --slate-50:  #F1F4F9;   /* highest-contrast text / light surface   */
  --white:     #FFFFFF;

  /* ---- Emerald (the one accent) ----------------------------------------- */
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;  /* hover / glow                            */
  --emerald-500: #10B981;  /* brand accent                            */
  --emerald-600: #059669;  /* press                                   */
  --emerald-700: #047857;
  --emerald-900: #06372A;  /* deep tint fill                          */
  --emerald-950: #052017;  /* faint tint wash                         */

  /* ---- Supporting semantics (used sparingly) ---------------------------- */
  --amber-400:  #FBBF24;
  --amber-500:  #F59E0B;
  --rose-400:   #FB7185;
  --rose-500:   #F43F5E;
  --sky-400:    #38BDF8;
  --sky-500:    #0EA5E9;

  /* ========================================================================
     SEMANTIC ALIASES — reference these in product work, not the raw ramp.
     ======================================================================== */

  /* Surfaces */
  --bg-void:        var(--slate-950);
  --bg-base:        var(--slate-925);
  --bg-surface:     var(--slate-900);
  --bg-raised:      var(--slate-850);
  --bg-card:        var(--slate-800);
  --bg-card-hover:  var(--slate-750);
  --bg-inset:       var(--slate-950);
  --bg-inverse:     var(--slate-50);

  /* Text */
  --text-primary:   var(--slate-50);
  --text-secondary: var(--slate-300);
  --text-muted:     var(--slate-400);
  --text-faint:     var(--slate-500);
  --text-inverse:   var(--slate-950);
  --text-accent:    var(--emerald-400);
  --text-on-accent: #04130D;            /* dark slate-ink on emerald fills */

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  var(--slate-700);
  --border-accent:  var(--emerald-500);

  /* Accent roles */
  --accent:         var(--emerald-500);
  --accent-hover:   var(--emerald-400);
  --accent-press:   var(--emerald-600);
  --accent-tint:    rgba(16,185,129,0.12);   /* faint emerald wash       */
  --accent-tint-2:  rgba(16,185,129,0.20);
  --accent-contrast: var(--text-on-accent);

  /* Status */
  --success:        var(--emerald-500);
  --warning:        var(--amber-500);
  --danger:         var(--rose-500);
  --info:           var(--sky-500);

  /* Focus ring */
  --ring:           rgba(16,185,129,0.55);
  --ring-offset:    var(--bg-surface);

  /* Selection */
  --selection-bg:   rgba(16,185,129,0.28);
}

::selection { background: var(--selection-bg); color: var(--text-primary); }