/* Colors — Media Virtual + Nimbus (Nuvemshop) palette
 *
 * Media Virtual brand sits ON TOP of the Nimbus color scales. The agency's
 * two blues (deep corporate + bright cyan) take the brand slot; Nimbus
 * neutrals + semantic scales handle every supporting role.
 *
 * Ref tokens = raw scales. Sys tokens = semantic aliases (use these).
 */

:root {
  /* ─── Brand — Media Virtual ────────────────────────────────────────── */
  /* Picked from the MediaVirtual logo wordmark.                          */
  --mv-blue-deep:   #1565C0;  /* "Media" wordmark, M-shape dark           */
  --mv-blue:        #0F73D9;  /* Brand primary (interactive)              */
  --mv-blue-bright: #1E88E5;  /* Lifted primary                           */
  --mv-cyan:        #29B6F0;  /* "Virtual" wordmark, brand accent         */
  --mv-cyan-light:  #4FC3F7;  /* Lifted accent                            */
  --mv-sky:         #E3F2FD;  /* Brand surface tint                       */

  /* Brand gradient (used in heroes, callouts, CTAs)                      */
  --mv-gradient-brand: linear-gradient(135deg, var(--mv-blue-deep) 0%, var(--mv-blue) 45%, var(--mv-cyan) 100%); /* @kind other */
  --mv-gradient-soft:  linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); /* @kind other */

  /* ─── Primary (Nimbus, light) ──────────────────────────────────────── */
  --primary-100: #FFFFFF;
  --primary-99:  #EEF5FF;
  --primary-95:  #C2DBFE;
  --primary-90:  #96C1FC;
  --primary-80:  #4B92F5;
  --primary-70:  #2577E9;
  --primary-60:  #0059D5;
  --primary-50:  #004EBC;
  --primary-40:  #00429F;
  --primary-30:  #00347D;
  --primary-20:  #00255A;
  --primary-10:  #001737;
  --primary-5:   #000B19;

  /* ─── Success / Warning / Danger (Nimbus) ──────────────────────────── */
  --success-99: #DEFEF2; --success-90: #7AF7C7; --success-60: #00C87B;
  --success-40: #00935B; --success-30: #007447; --success-20: #005333;
  --success-10: #003420; --success-5:  #001910;

  --warning-99: #FEF2DE; --warning-90: #F7C77A; --warning-60: #C87B00;
  --warning-40: #935B00; --warning-30: #744700; --warning-20: #533300;
  --warning-10: #342000; --warning-5:  #191000;

  --danger-99:  #FEDEDE; --danger-90:  #F77A7C; --danger-60:  #C80003;
  --danger-40:  #930002; --danger-30:  #740002; --danger-20:  #530001;
  --danger-10:  #340001; --danger-5:   #190000;

  /* ─── Neutral (Nimbus) ─────────────────────────────────────────────── */
  --neutral-100: #FFFFFF;
  --neutral-99:  #F6F6F6;
  --neutral-95:  #E7E7E7;
  --neutral-90:  #D1D1D1;
  --neutral-80:  #B0B0B0;
  --neutral-70:  #888888;
  --neutral-60:  #777777;
  --neutral-50:  #6D6D6D;
  --neutral-40:  #5D5D5D;
  --neutral-30:  #4F4F4F;
  --neutral-20:  #454545;
  --neutral-10:  #3D3D3D;
  --neutral-5:   #1F2020;
  --neutral-0:   #0A0A0A;

  /* ─── Semantic aliases (USE THESE in components) ───────────────────── */
  /* Surfaces                                                             */
  --bg-page:           var(--neutral-100);
  --bg-subtle:         var(--neutral-99);
  --bg-muted:          var(--neutral-95);
  --bg-inverse:        var(--neutral-5);
  --bg-brand-soft:     var(--mv-sky);
  --bg-brand-strong:   var(--mv-blue);

  --surface-card:      var(--neutral-100);
  --surface-raised:    var(--neutral-100);
  --surface-sunken:    var(--neutral-99);

  /* Borders                                                              */
  --border-subtle:     var(--neutral-95);
  --border-default:    var(--neutral-90);
  --border-strong:     var(--neutral-80);
  --border-brand:      var(--mv-blue);
  --border-focus:      var(--mv-blue);

  /* Text                                                                 */
  --text-primary:      var(--neutral-0);
  --text-body:         var(--neutral-10);
  --text-muted:        var(--neutral-40);
  --text-disabled:     var(--neutral-50);
  --text-inverse:      var(--neutral-100);
  --text-link:         var(--mv-blue);
  --text-link-hover:   var(--mv-blue-deep);
  --text-on-brand:     #FFFFFF;

  /* Interactive — brand                                                  */
  --interactive-brand:          var(--mv-blue);
  --interactive-brand-hover:    var(--mv-blue-deep);
  --interactive-brand-pressed:  var(--primary-30);
  --interactive-brand-subtle:   var(--mv-sky);

  /* Interactive — neutral                                                */
  --interactive-neutral:         var(--neutral-95);
  --interactive-neutral-hover:   var(--neutral-90);
  --interactive-neutral-pressed: var(--neutral-80);

  /* Semantic surfaces                                                    */
  --surface-success: var(--success-99); --text-success: var(--success-20); --border-success: var(--success-60);
  --surface-warning: var(--warning-99); --text-warning: var(--warning-20); --border-warning: var(--warning-60);
  --surface-danger:  var(--danger-99);  --text-danger:  var(--danger-20);  --border-danger:  var(--danger-60);
  --surface-info:    var(--mv-sky);     --text-info:    var(--primary-20); --border-info:    var(--mv-blue);

  /* Overlays                                                             */
  --overlay-scrim:    rgba(10, 10, 10, 0.48);
  --overlay-soft:     rgba(10, 10, 10, 0.04);
  --overlay-on-image: linear-gradient(180deg, rgba(0, 35, 90, 0) 40%, rgba(0, 35, 90, 0.65) 100%); /* @kind other */

  /* Charts / data viz — corporate palette                                */
  --chart-1: var(--mv-blue);
  --chart-2: var(--mv-cyan);
  --chart-3: var(--mv-blue-deep);
  --chart-4: #7CC4F2;
  --chart-5: var(--success-60);
  --chart-6: var(--warning-60);
}