/* ============================================================
   UniFi Nerds — Color System
   Brand DNA sampled from the logo + marketing videos:
     • UNIFI blue (logo)     #1DAEFF  — the bright hero
     • Action blue (video)   #138DFE  — deeper azure accent bar
     • Ink (logo wordmark)   #17181A
     • Concrete backdrop     #232526  — video set wall
   Cool, technical neutral ramp. Confident, clean, "Ubiquiti-adjacent".
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --un-blue:          #1DAEFF; /* the hero — UNIFI wordmark blue */
  --un-blue-bright:   #138DFE; /* action / accent bar */
  --un-blue-deep:     #0A6CE0; /* hover / pressed */
  --un-blue-ink:      #075BBE; /* text-on-light emphasis */
  --un-blue-tint:     #E7F6FF; /* wash / selected surface */
  --un-blue-tint-2:   #CDECFF; /* stronger wash / border */

  --un-ink:           #17181A; /* logo black — primary text on light */
  --un-concrete:      #232526; /* video-set concrete — dark surface */
  --un-concrete-2:    #2E3132; /* raised dark surface */

  /* ---- Neutral ramp (cool gray) ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFC;
  --gray-50:  #F4F6F8;
  --gray-100: #EAEEF2;
  --gray-150: #E0E5EB;
  --gray-200: #D3DAE1;
  --gray-300: #B7C0C9;
  --gray-400: #8B96A1;
  --gray-500: #626D78;
  --gray-600: #49535C;
  --gray-700: #343B43;
  --gray-800: #22272C;
  --gray-900: #14181B;
  --gray-950: #0B0E10;

  /* ---- Semantic (status) ---- */
  --green:   #1FB57A;  --green-tint:  #E4F7EF;  --green-deep:  #158A5D;
  --amber:   #F5A524;  --amber-tint:  #FEF3DD;  --amber-deep:  #C77F0A;
  --red:     #F0453B;  --red-tint:    #FDE7E5;  --red-deep:    #C42D24;
  --info:    var(--un-blue-bright);

  /* ---- Semantic aliases: light theme (default) ---- */
  --bg-app:         var(--gray-50);
  --bg-canvas:      var(--gray-0);
  --surface:        var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover:  var(--gray-50);
  --surface-active: var(--gray-100);
  --surface-inverse:var(--un-concrete);

  --text-strong:    var(--un-ink);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-subtle:    var(--gray-400);
  --text-onblue:    #FFFFFF;
  --text-oninverse: var(--gray-50);
  --text-link:      var(--un-blue-bright);

  --border-subtle:  var(--gray-150);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--un-blue-bright);

  --accent:         var(--un-blue-bright);
  --accent-hover:   var(--un-blue-deep);
  --accent-quiet:   var(--un-blue-tint);
  --focus-ring:     color-mix(in srgb, var(--un-blue-bright) 40%, transparent);
}

/* ---- Dark theme scope (the "concrete" console look) ---- */
.un-dark {
  --bg-app:         var(--gray-950);
  --bg-canvas:      var(--un-concrete);
  --surface:        var(--un-concrete);
  --surface-raised: var(--un-concrete-2);
  --surface-sunken: var(--gray-950);
  --surface-hover:  #33383A;
  --surface-active: #3B4143;
  --surface-inverse:var(--gray-0);

  --text-strong:    var(--gray-25);
  --text-body:      var(--gray-200);
  --text-muted:     var(--gray-400);
  --text-subtle:    var(--gray-500);
  --text-oninverse: var(--un-ink);

  --border-subtle:  rgba(255,255,255,.07);
  --border-default: rgba(255,255,255,.12);
  --border-strong:  rgba(255,255,255,.20);

  --accent:         var(--un-blue);
  --accent-hover:   var(--un-blue-bright);
  --accent-quiet:   rgba(29,174,255,.14);
}